MouseOver Thumbnail to Larger



1. Create a ThumbnailLarger.html file with Notepad and open it in your browser


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>MouseOver Thumbnail to Larger</title>
</head>
<body>
  <img src="images/java.jpg" width="60"  onmouseover="zoomImage(this)" /> 
  <img src="images/python.jpg" width="60"  onmouseover="zoomImage(this)" /> 
  <img src="images/csharp.jpg" width="60"  onmouseover="zoomImage(this)" /> 
  <hr>
  <img id="image" />
</body>
</html>

<script>
    function zoomImage(obj)
    {
        document.getElementById("image").src=obj.src;
    }
</script>




Easy Learning Java


Easy Learning Design Patterns Java Practice


Easy Learning Data Structures & Algorithms Java Practice


Java Parsing Collection XML JSON


Easy Learning JDBC + MySQL


Easy Learning Javascript


Easy Learning Design Patterns Javascript


Easy Learning Design Patterns ES6+ Javascript


Easy Learning Data Structures & Algorithms Javascript


Easy Learning Data Structures & Algorithms ES6+Javascript


Easy Learning Oracle SQL


Easy Learning JDBC + Oracle


Easy Learning Python 3


Easy Learning Data Structures & Algorithms Python 3


Easy Learning Design Patterns Python 3


Easy Learning MySQL SQL


Easy Learning HTML CSS

MouseOver Thumbnail to Larger