Image Mapping and Rollover Popups Options

[Dyeruz]

Hello, I want to mouse over sections of my image map and have each section popup a different picture. I had some knowledge with rollovers as pertaining to sliced images that were separately uploaded to sites such as photobucket et all. but I have problems with the image mapping as where and how to insert the rollover code when the initial code for the sections I want to mouse over look like this:

<area shape="poly" alt="" coords="718,128, 718,73, 681,89" href="http://profile.myspase.com/index.cfm?fuseaction=user.viewprofile&friendid=11875369">

can anyone help?

site url: http://www.myspace.com/tendaiac

thank you!

[Frederiek]

See the FAQ at http://htmlhelp.com/faq/html/images.html#imagemap

[Dyeruz]

See the FAQ at http://htmlhelp.com/faq/html/images.html#imagemap

Thanks for the reply, I do have some understanding of css and html as related to sliced images but because the image mapped code is generated by in this case dreamweaver I'm looking for a way to insert the rollover code without messing up the functions of the image mapped profile so after the :

a.classname:hover span{
display: block;
position: absolute;
left:50%;
top: -44px;
left: 255px;
width: 285px;
padding: 5px;
margin: 10px;
z-index: 5;
filter:none;
text-align: center;text-decoration:none;}

the html code usually looks like this :

<a class="classname" href="URL TO LINK"><img src="URL TO ROLLOVER IMAGE HERE(CLEAR GIF)" border="0"><span><img src="URL TO POP UP IMAGE HERE"/></span></a>
</div>


but my image mapped code looks like this for example:

<area shape="poly" alt="" coords="718,128, 718,73, 681,89" href="http://profile.mysace.com/index.cfm?fuseaction=user.viewprofile&friendid=13895316">

so how would I incorporate the standard rollover code onto the image mapped code..this make sense?

thanks

[Frederiek]

A quick Google search on "CSS imagemaps" returned, to mention a few wellknown:

ALA's article on CSS Sprites: Image Slicing’s Kiss of Death
CSSplay: CSS Image map

and CSS Image Maps: Flickr-like Technique?

Others may be of interest to you too.

[Dyeruz]

A quick Google search on "CSS imagemaps" returned, to mention a few wellknown:

ALA's article on CSS Sprites: Image Slicing’s Kiss of Death
CSSplay: CSS Image map

and CSS Image Maps: Flickr-like Technique?

Others may be of interest to you too.

hi and thanks but articles still dont answer my "specific" question. anyone know?

[IdeaZone]

I would actually build it in Fireworks instead of Dreamweaver since it is completely graphical anyways -- then export the code directly to where you want to post it.

J

[pandy]

Hello, I want to mouse over sections of my image map and have each section popup a different picture. I had some knowledge with rollovers as pertaining to sliced images that were separately uploaded to sites such as photobucket et all. but I have problems with the image mapping as where and how to insert the rollover code when the initial code for the sections I want to mouse over look like this:

<area shape="poly" alt="" coords="718,128, 718,73, 681,89" href="http://profile.myspase.com/index.cfm?fuseaction=user.viewprofile&friendid=11875369">

<area shape="poly" alt="" coords="718,128, 718,73, 681,89" href="http://profile.myspase.com/index.cfm?fuseaction=user.viewprofile&friendid=11875369" onmouseover="doYourStuff()">