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]

All right, This is my layout : http://img.photobucket.com/albums/v404/swt...nter/Daily1.png

and this is how I'm doing my rollover: http://img.photobucket.com/albums/v404/swt...er/Rollover.png

Is that right ?

[Relentless]

^ That is correct. Although, your suppose to have one for each link. Not the whole entire navigation. Just separate rollover image according to the links. Then you would put the class in the link, following the CSS code you added in.

[xxNinaMilla]

Okay, so I separated all the links,
Now what ?

[xxNinaMilla]

http://img.photobucket.com/albums/v404/swt...er/Comment.pngl
http://img.photobucket.com/albums/v404/swt...winter/Flix.png
http://img.photobucket.com/albums/v404/swt...winter/Home.png
http://img.photobucket.com/albums/v404/swt...winter/Mail.png

I suppose that's how you do it.
Okay, so the codes, do I have to do it with each link ?

[miyashu]

that's right. you'll need to repeat the codes for every rollover you have. just make sure you give the classes different names.

for example, for the home rollover, you'll have "a.home" and "a.home:hover"
for mail, you'll probably want to use "a.mail" and "a.mail:hover"
and so on...

[xxNinaMilla]

I odn't understand.
am I supposed to substitute the links for the other one ?

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;}

If not, then what do I do ?

[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.

[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 ?

[Relentless]

http://img.photobucket.com/albums/v404/swt...nter/Daily1.png

You didn't get the concept that I told you.

You know the two images that we're together. The image link and the image link when it's roll overed. All you have to do is CUT OUT the image link that is going to be rollovered (Bottom). So that will be the original image link, which is the TOP part. That's what you put in the first URL. Like so, a: home { and others.

You put the ORIGINAL IMAGE for the LAYOUT. That's why it's not working.

[xxNinaMilla]

Oh. I get it.
Thanks that helped me out alot.

[Insurmountable]

Topic closed, if you need this re-opened within the next day or two feel free to contact me or someone else on design staff. After two days this topic will be moved to the resolved topics forum, so if you have the same question after that feel free to make a new topic.