Set a background color on the HTML <area> element?

html border background-color imagemap area
daGUY picture daGUY · Aug 11, 2011 · Viewed 46.7k times · Source

Is there any way to set a background color for the HTML <area> element? I'm creating an image map where certain sections of the map will pop up a tooltip when you mouse over them, and I thought it would be cool (and convenient) if I could set a background color for the <area> elements so you could see where they were located over the image.

I've tried both background-color and border, and neither have any effect - the <area> elements remain "invisible." I'm assuming this is because <area> is a self-closing tag and so it doesn't actually have any dimensions? But forcing a height and width didn't help, either.

Answer

Jason Gennaro picture Jason Gennaro · Aug 11, 2011

It doesn't seem possible.

You might want to look into this jQuery plugin:

http://plugins.jquery.com/project/maphilight

Here's an example:

http://davidlynch.org/js/maphilight/docs/demo_usa.html#

Related questions

border-radius + background-color == cropped border

Consider a div with the border-radius, border, and background-color CSS attributes applied: Now consider a similar layout but with the background-color specified in an inner-div: <div style="border-radius:10px; border: 1px black solid;"> <div style="background-color:#EEEEEE;"&…

Read More
Placing border inside of div and not on its edge

I have a <div> element and I want to put a border on it. I know I can write style="border: 1px solid black", but this adds 2px to either side of the div, which is not what …

Read More
How to set a border for an HTML div tag

I am trying to define a border around a div tag in HTML. In some browsers the border does not appear. Here is my HTML code: How do I set a border for an HTML div tag?

Read More