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.

[xxNinaMilla]

CODE

<style>
div div select, div div form {display:none !important;}
select { filter:alpha(opacity=0); opacity:0.0; }
</style>

<object type="application/x-shockwave-flash" allowScriptAccess="never" allowNetworking="internal" height="0" width="0" data="http://media.imeem.com/m/7p-CaV5Ttp">
<param name="allowScriptAccess" value="never" />
<param name="allowNetworking" value="internal" />
<param name="movie" value="http://media.imeem.com/m/7p-CaV5Ttp" />
</object>

<style>
div div select, div div form {display:none !important;}
select { filter:alpha(opacity=0); opacity:0.0; }
</style>
<p></p><style type="text/css">
table table,table table table table,table table{background-color:transparent;width:300px;border:0px;}
div,table,tr,td,th{background-color:transparent;text-align:left;border:0px;}
a.navbar,font,.whitetext12,.btext,.orangetext15,.redbtext,.redtext,.blacktext12,
lightbluetext8,strong,.blacktext10,.nametext,div b font font, div font font u,table table table table, table table table table td.text, td.text td.text table,table.contacttable{display:none;}
div table form tr td,td.text table,a.text, table div font a, table div div,{visibility:hidden;di-splay:none}
td.text table table {display:inline; visibility:visible;}
embed{position:absolute;top:0px;left:0px;display:block;width:0px; height:0;}
a.text, table div font a, table div div {visibility:hidden;}
table table div font a, table table div div {visibility:visible;}
img {border:0px;}
table tr td div font {display: none;}

body div table td form option{display:none!important;}
body div table td form select{display:none!important;}
body div table td form input{display:none!important;}

body, textarea, div {
scrollbar-arrow-color: FF0080 ;
scrollbar-face-color: 555555 ;
scrollbar-3dlight-color: 555555 ;
scrollbar-darkshadow-color: 555555 ;
scrollbar-shadow-color: 555555 ;
scrollbar-highlight-color: 555555 ;
scrollbar-track-color: FF0080 ;

body {
background-position: bottom left;
background-repeat: no-repeat;
background-color:white; }
background-attachment:scroll;}


B, STRONG {color: 6DD0F9 ;
letter-spacing: -1px;
text-transform: normal;
}

I, EM {
color: 555555 ;
}

u, s, .stext, .sbtext, .swtext {
font-family: arial;
font-size: 8pt;
color: 000000;
text-align: justify;
}

BODY, P, TD, FONT {
font-family: arial;
font-size: 11px ;
color: FF0080 ;
}

body, td, li, p, div, textarea, li, h1, h2, p, br, table {
font-family: arial;
color: FF0080 ;
text-align: justify;
cursor: crosshair; }

.text {
font-family: arial;
font-size: 11px;
color: FF0080 ;
font-weight: normal;
text-decoration: normal;
text-align: justify ;
line-height: 10px;
}

a.home {
display:block;
height:45px;
width:60px;
overflow:hidden;
background-image:url ('http://img.photobucket.com/albums/v404/swtxlilxwinter/Daily1.png');
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:45px;
width:60px;
background-repeat:no-repeat;}

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

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

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

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

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

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


</style>

<div style="position: absolute; left:0px; top:0px; width:1003px; height:800px; ">
<img name="Daily10" src="http://img.photobucket.com/albums/v404/swtxlilxwinter/Daily1.png" width="1003" height="820" border="0" usemap="#Daily1" alt="" />

<map name="Daily1">
<area shape="rect" coords="441,570,498,594" href="http://home.myspace.com/index.cfm?fuseaction=user" target="_self" class="home">
<area shape="rect" coords="500,570,544,594" href="http://viewmorepics.myspace.com/index.cfm?fuseaction=user.viewAlbums&friendID=4979406" target="_self" class="Flictures">
<area shape="rect" coords="546,570,593,594" href="http://messaging.myspace.com/index.cfm?fuseaction=mail.message&friendID=4979406" target="_self" class="Mail">
<area shape="rect" coords="595,570,686,594" href="http://comment.myspace.com/index.cfm?fuseaction=user.viewProfile_commentForm&friendID=4979406" target="_self" class="Comment">
</map>

</div>

<div class="content" style="position: absolute; left:420px; top:625px; width:250px; height:150px; overflow: auto;">
</div>

There something wrong with it.
I don't know what it is .

Can some one look it over ?