<area> problem

[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?

[opifex]

not sure i'm following... you want to outline the area shape with a border?
not valid. you can use rollover images to highlight the area.
another option is to create your "image map" in css defining each "hot-spot".

[treeleaf20]

Do you have an example on how to use rollover images to highlight the area. My problem is I don't want anything to show up when the page loads. I only want an image to appear when it's rolled over.

[opifex]

This covers javascript pretty well (http://www.sophiaknows.com/codebase/js/rollover.js.html) and this is a pure css example (http://www.freecssmenus.co.uk/css_world_map_rollover_629.php).

Use your favorite search engine and you can find hundreds more examples.

[rnd me]

i think map is supposed to be invisible...