Help - Search - Members - Calendar
Full Version: Image Mapping and Rollover Popups
HTMLHelp Forums > Web Authoring > General Web Design
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
QUOTE(Frederiek @ Jun 1 2007, 08:35 AM) *


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
QUOTE(Frederiek @ Jun 2 2007, 11:58 AM) *

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
QUOTE(Dyeruz @ May 31 2007, 11:43 PM) *

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()">
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2010 Invision Power Services, Inc.