Change Picture By Using "onmouseover" And "onmouseout" in HTML

Just to make sure that you understand about what you are gonna learn in this tutorial, please try to hover your cursor on the image below:

Get the idea? When you hover your cursor on "#0", it will change to "#1". And then, it will be changed back to "#0", once you move your cursor away from the image. Let's see how to make it!

We only need to use "onmouseover" and "onmouseout" inside the image tag. Let's get started by looking the HTML below or you can copy and paste the code to the code editor that you have installed in your computer:

HTML: 
<html>
<head>
</head>
<body>

<img src="http://4.bp.blogspot.com/-adT2013Vz8M/UckPJ6NVzuI/AAAAAAAAAg0/TVxvWRLmhDk/s320/0.png" onmouseover="this.src='this.src='http://3.bp.blogspot.com/-yqnZf73J69I/UckPKCz2jRI/AAAAAAAAAg8/3UPUSqJb-uA/s320/1.png'" onmouseout="this.src='this.src='http://4.bp.blogspot.com/-adT2013Vz8M/UckPJ6NVzuI/AAAAAAAAAg0/TVxvWRLmhDk/s320/0.png'" />

</body>
</html>

Here's the explanation. First of all, we load the image source which is "#0". By using the "onmouseover", when you hover your cursor on the image, it will be changed to "#1". And then, you can use the "onmouseout" to change the picture to another picture (in this case is "#0") when you move your cursor away from the picture.

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

Labels: , , , ,