How to Create a Rollover Image Effect in HTML

To create a rollover effect using plain HTML is easy, and you can use it nearly on every hosting service (included Blogger and free WordPress.com) service.

You need two different images, same size, like follow:

   

The HTML code to use is:

< img src="FIRST-IMAGE" onmouseover="this.src='SECOND-IMAGE'" onmouseout="this.src='FIRST-IMAGE'" >

The result (roll over it with your mouse to see the effect!):