The image will change to another one when you move your mouse over the front one and this is called Rollover Image Effect which called by Helplogger. There are two different images that need to use for this effected change when you put the mouse over and it will back with the first image quickly when you take the mouse out. The images were changed without using flash or script. Otherwise, we use one a simple HTML code.
Create a change Image when put Mouse Over
Let's see this below DEMO
To make this image change "Rollover" You can use the below code:
<a href="URL ADDRESS"><img src="URL OF THE FIRST IMAGE" onmouseover="this.src='URL OF SECOND IMAGE'" onmouseout="this.src='URL OF FIRST IMAGE'" /></a>
Changing Instruction Guidance:
Step 1: You can change "URL ADDRESS"
URL Address is the option that you can use for any that you want to go. Ex: http://blogsupporter.com
Step 2: Change The "URL OF THE FIRST IMAGE"
The first image is the image that shows before you take the mouse over it.
Step 3: Change the "URL OF SECOND IMAGE"
The second image is the image that appears when you put the mouse over it and disappear when you take it out.
** The code can use in your HTML Widget sidebar and you use it in the HTML Post/Page.
Credit by: help blogger