Roleover Image Widget

Have you ever wanted to create a role over effect? Well if you do here is the place for you. If you don't know what a roleover is it is an image where you place your mouse over it the image changes.

Making Rollover Effect Image

Use this code in a new widget to create the roleover effect.

Code:

<a href="TARGET URL GOES HERE"><img src="URL OF FIRST IMAGE GOES HERE" onmouseover="this.src='URL OF SECOND IMAGE GOES HERE'" onmouseout="this.src='URL OF FIRST IMAGE GOES HERE'" /></a>

You now need to customize the code by adding the images you want to use and the address you want it to lead to when clicked.

In the above code change the following:

1.TARGET URL GOES HERE

Place the address you want the image to lead to when it's clicked.

2.URL OF FIRST IMAGE GOES HERE (x2)

Place the URL of the first image here this is the image shown before you hover over it.

3.URL OF SECOND IMAGE GOES HERE
Place the URL of the second image there, this is the image that appears when your cursor hovers over it.

Hope this helps you

Hello,

This looks like a tutorial. If you would like to submit a tutorial, please read our topic on tutorial contribution first: https://help.forumotion.com/t108908-tutorial-contributors

Thanks. This topic will be locked.