<area> help

[treeleaf20]

All,

I have an the following code:

 

<img src="rascal.jpg" width="600" height="800" border="0" usemap="#Map" />

<map name="Map" id="Map"><area shape="rect" coords="191,484,406,670" href="#" class="map"/></map>

 

I want to add a style to the area for on hover etc. So I did this:

</script>

<style type="text/css">

map{

border: 0px solid #000000;

}

map:hover{

border: 10px solid #000000;

}

</style>

 

It shows below the image, why wouldn't it show it as the area?

[seanlim]

you probably want to apply the style to AREA instead of MAP?

 

area{

border: 10px hidden #000;

}

 

area:hover{

border-style: solid;

}

 

if you do want the border around the entire image, try applying the border onto IMG instead of MAP

[treeleaf20]

Thanks, that didn't work though. It's weird because if I change the css to this:

area{

border: 10px solid #000;

}

 

area:hover{

border-style: solid;

}

 

To show it when the page loads, it doesn't show up...

[seanlim]

seems like you can't set the border property for <area>..  :-\

 

just a wild jab: you could try setting the attribute border=1 for your area tag

 

<area border="1"...

 

then set area visibility to hidden and use javascript to achieve the rollover effect.