Image Mapping Advanced, How do I create a(n) hover effect on my Image Map ? Options

[xxNinaMilla]

I have a simple inquiery. How do I create an alternate rollover image over my image map.

For Example: http://www.createblog.com/layouts/preview.php?id=26566
In this simple layout done by MissMaybe, When you hover over the links on the right, a light blue scribble appears over it.

I would like to know how exactly how you do that on Paint Shop Pro XI

I'd greatly appreciate any help regaurding this topic.
Thanks.

[Relentless]

There is a couple mistakes.

CODE

a.home {
display:block;
height:44px;
width:125px;
overflow:hidden;
background-image:url ('http://img.photobucket.com/albums/v404/swtxlilxwinter/Home.png');
background-position:top center;
background-repeat:no-repeat;}

a.home:hover {
background-image:url ('
http://img.photobucket.com/albums/v404/swt...Home.png');
background-position:top center;
display:block;
height:44px;
width:250px;
background-repeat:no-repeat;}

The first image link, that's suppose to be the main image link ONLY (meaning the original image map), not the hover image link on the bottom.

Just take that URL on the first one, and put it on the hover part like this (Make sure the original is the same exact size, (height: 44px, width 125px):

CODE

a.home {
display:block;
height:44px;
width:125px;
overflow:hidden;
background-image:url ('URL LINK OF ORIGINAL IMAGE LINK');
background-position:top center;
background-repeat:no-repeat;}

a.home:hover {
background-image:url ('http://img.photobucket.com/albums/v404/swtxlilxwinter/Home.png');
background-position:top center;
display:block;
height:44px;
width:250px;
background-repeat:no-repeat;}

Now you would have to put the links in as follows:

CODE

<a href="LINK HERE" class="home"></a>

Everytime you name the image hovers, make sure the classes match, like what miyashu said.