Image Rollovers

  Tutorial hardness:

Rate this tutorial:

In this requested tutorial I will teach you how to create image rollovers using Paint Shop Pro. The image of the twitter bird that I am using for this tutorial was from Free Icons Web.

To begin, save the image you want to create a rollover for. Then, save a different image with what you want the rollover to be. An example can be seen on the right.

Go back to your original image which you want to add the rollover to; then go to File > Export > Imape Mapper. There are a range of tools to pick from that could help you with your mapping, I've picked the square tool and highlighted over the area that I want to be hyperlinked.

Now, fill in the URL and ALT text box. The URL box applies to where you want the image to be linked to, and the ALT text box applies to what you want to show when hovered. I have left my ALT text box empty.

Once you have done that click on 'Rollover Creator'. Tick the 'mouse over' and 'mouse out' box, then click the browsing image next to these one by one. For the mouse over image you want the second image we created and for the mouse out image you want your original image that you are image mapping. Once you're done click 'OK' and 'Save As'. I have saved mine as 'imagemap.htm'.

Except, we are not done yet. Open up the 'imagemap.htm' (or whatever you called it) file via Notepad, and copy the code - paste it where ever you want it to appear. I'm just leaving mine in the .htm file. I have uploaded both of my imagemap images onto photobucket.

We are going to replace the image codes with our photobucket images. For example, at the moment one of my lines is:

I'm going to replace that line with

And with that, your rollover is created! You can also create multiple rollovers on the same image. All you have to change is: once you press OK on the 'mouse over, mouse out' part, you use the square tool again to highlight what you want to be image mapped next.