Jump to content

Area Tag Difficulties With Css . . .


Recommended Posts

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

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...