Image Rollovers

Main >> Content >> Tutorials >> Paint Shop Pro >> Image Rollovers

Image rollovers looks really good on layouts or as a menu on websites! I haves used it a few times and you guys have asked me to make a tutorial so here it is! It is kinda hard, so read closely!

Step 1: First you have to make a layout or a picture with the pages you want to have in the menu. Save the picture! Here's one I've made:


Step 2: Now use the same picture but make something over the first page/link. It can be whatever you want. You can change the colour of the text or put a little symbol next to it. Remember to save it when you are done with your first page/link. Here's what I've done:


Step 3: Repeat the second step, but remember to save your picture for each time so that you get one picture for each link. Here's how all of my picture turned out (click to enlarge):



Step 4: You should now have one picture for all your links including the original picture you made at the beginning. Open the first picture. Click File >> Export >> Image Mapper.

Step 5: Use the Rectangle tool, which looks like this: , make a marking around the first link, like I have done in the picture under, then type in the URL like I have done. And then click Rollover Creator.


Step 6: A new window will appear when you click Rollover Creator. Here you will just be using the two ones at the top. First click on the little check box next to Mouse over, then browse for the second image you made, the one that shows what happend when you hover the first page/link. Then on Mouse out you have to browse for the first image you made, where all the links are cleared.


Step 7: Repeate this step with all of your other links. Remember to click Rollover creator for each time so that the image rollover will work.

Step 8: When you're finished with all your links click save to clipboard.


Step 9: Now before you do anything else, go to your site, find the page you want to have the layout/menu on and click Ctrl + V. A big code will now appear on your page.

Step 10: Upload your main picture to your website. Then paste the URL of the picture inside the huge code all the plases where it says onMouseOut, remeber that you have to paste it betwene the '' after src=. You also have to paste the URL at the top where it says src='blablablabla.jpg'.

Step 11: Then upload the other picture you made and paste them in the code where they are supposed to be. It may be hard to understand where all the URL's are supposed to go, but try to understand the code and how it works.

Step 12: If you have done everything correct your result will be something like mine: