Creating a Mouse Rollover

Using PSP Image Mapper

 

The first thing you need to do is create the images that you would like to use

What you see now

The rollover image

What you'll see if you click

 

Have your first image open and ready to work with

Click File > Export > Image Mapper

 

Choose the shape of the map. I used rectangle

 

Use your mouse to draw a rectangle around your image. This is done the same way you would use the selection tool while working on an image

 

If you are working with jpg, set your format to jpg. In this case I am working with gif. I I have set my format accordingly

 

Click on the rollover button

 

This window will appear. Here you can control the behavior of your rollover

I have it programmed as such

The first image you will see when you view the page is 01.gif (that is the one that I have open in PSP)

When you move your mouse over the heart, it will display 02.gif

When you move your mouse away from the heart, it will return to 01.gif

If you click on the heart, you will see 03.gif

I have chosen to limit my rollover to only those three transitions, However you can do more

When you have your rollover Creator set the way you would like it, click OK.

 

Now it's time to fill in the URL. This is not a necessity, but in my example it is programmed for the URL shown below

 

Click save as

You will be prompted to give your HTML a name in the folder of your choosing

You will then be prompted to give your image a name. You may simply overwrite with the same name

or give it a different name.

Below is another example of a rollover

This one is simply mouse IN and one is mouse OUT

No URL assigned

 

You are now ready to open your HTML in your favorite HTML editor

 

 

Have fun

 

If you have any questions or comments, email me at

kim@pixelbit.com