Demo: Place your mouse over the image below to see its rollover effect
Making Rollover Effect Image
You have the following code:
<a href="URL ADDRESS"><img src="URL OF THE FIRST IMAGE GOES HERE" onmouseover="this.src='URL OF THE SECOND IMAGE GOES HERE'" onmouseout="this.src='URL OF THE FIRST IMAGE GOES HERE'" /></a>
Change the colored texts as it follows:
1. URL ADDRESS
This is the address where somebody will be sent when clicks on the image.
Example, my blog address: http://www.helplogger.blogspot.com
2. URL OF THE FIRST IMAGE GOES HERE
Replace the orange text (two times) with the URL address of the image which will appear before you hover over it.
3. URL OF THE SECOND IMAGE GOES HERE
Replace the text in blue with the url of the image that will appear when the cursor hovers over it.
Now you can paste your image inside a blog gadget, going to Layout > click on Add a Gadget link (right side) > Select HTML/JavaScript from the pop-up window, then add it to your sidebar.
You can also add it inside your post by going to New Post > Switch to HTML tab and then paste the code in the empty box.
That's it. Enjoy ;)
Related: How to Create Rollover Image Effect using CSS.
0 comments: