Change An Image By Hovering On Another Image In HTML

We will try to change an image by hovering on another image on this tutorial. Just to make sure you understand what we are going to learn, please look and try the demo below:

When you hover your cursor on "#0", the "#1" will be changed to "#2". And, when you move your cursor away from the "#0", the current image "#2" will be changed to "#3".

Get the idea? Let's get started!

Firstly, you need to insert image "#1" normally to your html.

<img border="0" src="http://3.bp.blogspot.com/-yqnZf73J69I/UckPKCz2jRI/AAAAAAAAAg8/3UPUSqJb-uA/s320/1.png" />

But, adding an image like that is not enough. You need to specify an ID for that image.

<img id="change_this_image" border="0" src="http://3.bp.blogspot.com/-yqnZf73J69I/UckPKCz2jRI/AAAAAAAAAg8/3UPUSqJb-uA/s320/1.png" />

Secondly, let's load the image "#0".

<img border="0" src="http://4.bp.blogspot.com/-adT2013Vz8M/UckPJ6NVzuI/AAAAAAAAAg0/TVxvWRLmhDk/s320/0.png" />

We need to add "onMouseOver" and "onMouseout" inside the image tag of "#0". We will get the ID from image "#1" which is "change_this_image". And then, we want to change the image "#1" when we hover the mouse cursor on image "#0". So, the result will be like this:

<img border="0" src="http://4.bp.blogspot.com/-adT2013Vz8M/UckPJ6NVzuI/AAAAAAAAAg0/TVxvWRLmhDk/s320/0.png" onmouseover="getElementById('change_this_image').src='http://3.bp.blogspot.com/-onC9xdWu8uU/UckPKrxXcgI/AAAAAAAAAhE/_CAT4iJLvsI/s320/2.png'" onMouseOut="getElementById('change_this_image').src='http://2.bp.blogspot.com/-VMQ025ck63g/UckPNcIq_II/AAAAAAAAAhM/kVwNVbYiURI/s320/3.png'" />

Lastly, the final result should look like this:

<html>
<head>
<title>New Document</title>
</head>
<body>

<img id="change_this_image" border="0" src="http://3.bp.blogspot.com/-yqnZf73J69I/UckPKCz2jRI/AAAAAAAAAg8/3UPUSqJb-uA/s320/1.png" />

<img border="0" src="http://4.bp.blogspot.com/-adT2013Vz8M/UckPJ6NVzuI/AAAAAAAAAg0/TVxvWRLmhDk/s320/0.png" onmouseover="getElementById('change_this_image').src='http://3.bp.blogspot.com/-onC9xdWu8uU/UckPKrxXcgI/AAAAAAAAAhE/_CAT4iJLvsI/s320/2.png'" onMouseOut="getElementById('change_this_image').src='http://2.bp.blogspot.com/-VMQ025ck63g/UckPNcIq_II/AAAAAAAAAhM/kVwNVbYiURI/s320/3.png'" />

</body>
</html>

You can also make another variation like this:



When you hover your cursor on image "#0", the image "#1" will be changed to image "#2". And, when you move your cursor away from the image "#0", the current image which is image "#2" will be changed to image "#3".
For the variation. When you hover your cursor on image "#3", the image at the top will be changed to image "#2". And, when you move your cursor away from the image "#3", the top image will be changed to image "#1".
Here's the code:
<html>
<head>
<title>New Document</title>
</head>
<body>

<img id="change_this_image_again" border="0" src="http://3.bp.blogspot.com/-yqnZf73J69I/UckPKCz2jRI/AAAAAAAAAg8/3UPUSqJb-uA/s320/1.png" />
<br/>
<img border="0" src="http://4.bp.blogspot.com/-adT2013Vz8M/UckPJ6NVzuI/AAAAAAAAAg0/TVxvWRLmhDk/s320/0.png" onmouseover="getElementById('change_this_image_again').src='http://3.bp.blogspot.com/-onC9xdWu8uU/UckPKrxXcgI/AAAAAAAAAhE/_CAT4iJLvsI/s320/2.png'" onMouseOut="getElementById('change_this_image_again').src='http://2.bp.blogspot.com/-VMQ025ck63g/UckPNcIq_II/AAAAAAAAAhM/kVwNVbYiURI/s320/3.png'" />

<img border="0" src="http://2.bp.blogspot.com/-VMQ025ck63g/UckPNcIq_II/AAAAAAAAAhM/kVwNVbYiURI/s320/3.png" onmouseover="getElementById('change_this_image_again').src='http://3.bp.blogspot.com/-onC9xdWu8uU/UckPKrxXcgI/AAAAAAAAAhE/_CAT4iJLvsI/s320/2.png'" onMouseOut="getElementById('change_this_image_again').src='http://3.bp.blogspot.com/-yqnZf73J69I/UckPKCz2jRI/AAAAAAAAAg8/3UPUSqJb-uA/s320/1.png'" />

</body>
</html>

It's easy, isn't it? Good Luck!

Labels: , , , ,