How can I add a Rollover image or Rollover button to my WordPress

What is an image rollover? When you put the mouse pointer over the image (hover) the image changes. It’s pretty easy to have this kind of mouseover effect.

Put your mouse pointer over the following image to see it change

All you need to do is copy and paste the following code into your page or post:

Change the parameters as follows...
- Destination URL is the URL you want the image to link to
- target=”_top” opens the link in the same window. If you want it to open in a new window replace _top with _blank
- http://yourdomain.com/onroll.jpg is the url of the image that displays when someone points the mouse over it
- http://yourdomain.com/normal.jpg is the url of the image displaying when the mouse isn’t over it (note that you need to insert it twice in the code)
- Change width and height to fit your case
That’s it.

How to have just a rollover image (without link)

If you don’t want it to be a link and just want to have a rollover image use this code instead:

How to have multiple rollover buttons on the same page

To have multiple rollover buttons on a page each button has to have its own name. In the codes above the name of the buttons is sub_but and it appears three times in the codes. Just replace all the sub_but you find with something else for each button.

How do I know what the URL of the images is in my case?

1. Create a new folder on your Desktop
2. Name this new folder something like 'files' or ‘media’ or whatever
3. Copy your .jpg or any other image file to that folder
4. Upload the folder to the main location (root) of your server using your FTP application
5. http://yourdomain.com/nameofthefolder/nameofthefile.extension will be the address at which the file will be stored on the web
Example: http://yourdomain.com/media/nameofthefile.jpg