Image Preview with JavaScript

Design a HTML to display preview of image on mouse over with Javascript.

Solution:
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Gallery Preview</title>
  <script type="text/javascript">
    function DisplayPreview(image){
      document.getElementById('preview').innerHTML = '<img src="'+image+'" width="500" />';
    }
    function Hide(){
      document.getElementById('preview').innerHTML = 'Image preview area';
    }
  </script>
</head>
<body>
  <center>
  <img src="images/mahindra.jpg" width="300" height="200" onmouseover="DisplayPreview(this.src)" onmouseout="Hide()" />&nbsp; &nbsp; &nbsp;
  <img src="images/tata.jpg" width="300" height="200" onmouseover="DisplayPreview(this.src)" onmouseout="Hide()" />&nbsp; &nbsp; &nbsp;
  <img src="images/landrover.jpg" width="300" height="200" onmouseover="DisplayPreview(this.src)" onmouseout="Hide()" />&nbsp; &nbsp; &nbsp;
  <div id="preview" style="border-style: groove;text-align: center;width: 600px;height: auto;padding: 20px;">Image preview area</div>
  </center>
</body>
</html>
Result
                 
Image preview area
Posted by