CSSisyphus Posted July 13, 2009 Share Posted July 13, 2009 Good day.I've been tossing this one about for a bit now; and haven't yet found a complete answer/alternative which I might employ.I submit the following snippet for discussion: <!--Original "Tryit Editor v1.4" page location:http://www.w3schools.com/TAGS/tryit.asp?filename=tryhtml_areamap --><html><head><style type="text/css">area.transbox:hover { opacity:0.6; }</style></head><body><p>Click on the sun or on one of the planets to watch it closer:</p><img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap" /><map name="planetmap"> <area class="transbox" shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm" /> <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm" /> <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm" /></map></body></html> I have found that while the AREA tag will take a class label, and that label can properly be referred to by CSS hover, the preceding code will not render the desired mouseover opacity change for the region defined in the image map.Is there an approach to this problem which would allow CSS to "do the right thing," or is there another reasonably direct way of doing this without resorting to a regional rollover image?Thanks a bunch! Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.