How to apply a hover effect to map coordinates

Get Started
1

I wanted to apply a rollover image when you mouse over the diamonds on my splash page here

But I’m not sure how to do this when using map coordinates. Here is what I had for my code.

Any thoughts?


<div id="splashpage">

<p><a href="contact.html">Contact</a> | <a href="/careers/careers.html">Careers</a> | <a href="mailto:inquiries@wellstat.com">Inquiries</a></p>

<img src="images/diamond-splash.gif" alt="splash page image" border="0" usemap="#Map" />
<map name="Map" id="Map">

<area class="t1" shape="poly" coords="153,160,153,160,292,18,437,161,297,302,149,161" href="/Therapeutics/home.html" target="_parent" alt="Therapeutics homepage" />

<area shape="poly" coords="453,158,594,17,737,158,598,301,450,159" href="/Biologics/home.html" alt="biologics homepage" />
</map>

</div>




#splashpage .t1 a:hover {
	background-image:url(image.png);
}
2

I don’t know how maps work, as I only use lists to make “fake” maps, but I can hazard a guess:

#splashpage .t1 a:hover {
background-image:url(image.png);
}

You’re saying here to show an image when an anchor inside something with a class of t1 is hovered over. There is no a that I can see.

What about
map area:hover .t1 {
backgorund-image: url(image.png);
}

? Because it’s when the people are hovering on the “area” right? a means “anchor” which in this case the “area” is doing the same job.

If these are not all going to be links (if not every diamond will be a link) you could ditch the map and go with a normal menu list, and fake it with CSS. I’ve been doing this with a worldmap, and it’s been fun. There are limits tho, plus if all of your diamonds are going to be links it would be more difficult to implement because the anchors can only be squares thus will overlap each diamond.

3

Ah, finished. An example of a fake image map. Dunno if you can use this:

If you do a long click and move the mouse out of the way, you should be able to see an outline of the <a> which shows how each anchor usually covers another anchor. Yet, it still generally works. Underneath is a nice, normal list. So, people without images can still use the list like any menu.