<map> doesn't show color

[jonfanta]

Hi i am trying to make a 2 layer map. i have an image with that is a map. and on the map i wanted to add dots, second layer. i wanted to make 3 groups with every group a different colour. Every ID is a location and a group can be 20 people/locations. So i thought i make a class( class=end) and sommon that class in the css with a color. The problem now is that the color of that class doesn't show on the map. i have looked a lot on the internet and this forum, but i am now really stuck. can someone show me the way?

Thanx in advance.


<div id=imagemap>
<img height=728 src="map.jpg" width=728 useMap=#iDelta border=0>
<map name=iDelta>
<!-- Area id's start with a -->
<area class="end" id=a7 onmouseover="D(this.id,1);" onMouseOut="D(this.id);" onClick="L(this.id,1);" shape=circle coords=263,233,25;>
<area id=a23 onMouseOver="D(this.id,1);" onMouseOut="D(this.id);" onClick="L(this.id,1);" shape="poly" coords="349,78,366,109,428,75,416,46">
<area id=t1 onmouseover="D(this.id,1);" onMouseOut="D(this.id);" onClick="L(this.id,1);" shape="poly" coords="348,140,372,180,433,138,419,127,377,120">


img{
z-index: -1;
position: relative;
left: 0px;
visibility: visible;
width: 728Spx;
TOP: 0px;
height: 728px;
background-color: transparant
}
.end {
z-index: 4;
background-color: #f00;
position: absolute;
visibility: hidden;
}

for complete code:

http://end.jumpcafe.nl/kaart/bkaart.html
http://end.jumpcafe.nl/kaart/bkaart.css
http://end.jumpcafe.nl/kaart/bkaart.js

[jscheuer1]

Neither map nor area tags may have color or background color. If you want to make something on an image map appear to change color, you must superimpose something (another element perhaps an image would be best) over it via absolute positioning and javascript. Once you do that though (tricky enough to get the position right cross browser without hard coding it for each triggering area tag), the mouse will no longer be over the trigger. So you will need a way to prevent the onmouseout behavior of the trigger from firing until the mouse moves off of the superimposed element.