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

Question

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.

Gagne

Answer 1

u can use div(set postition:absolute) instead of area

Decimate

That did the trick. I just used divs in place of areas and then attached my tooltip plugin to the divs. Worked like a charm. Thanks! – Gagne

How would the div tag be declared in the map tag after this change? can you paste a sample div tag? – Scientistic

Surely this would lose the benefit of using <map> and <area> tags which is they refine non-rectangular shapes for clicking, mouseover etc? – Parra

@user568458: Exactly, and that's why you need to use both <area> and <div> for certain kind of applications... – Urano

An example would be appreciated. As much as I appreciate the time invested in responding, none of the above information is actionable. I have the same issue. I want to create a time zone map, colouring the time zones based on information stored in a database. Unless I am mistaken a div is rectangular, so it won't solve the problem. If I put the area in a div, then the div will change colour but the area won't. – Eatables

Answer 2

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#

Tenderize

The link to the plugin is down, just redirects to jQuery homepage - the best link I can find is davidlynch.org/projects/maphilight - looks like the code works by drawing VML in internet explorer and HTML Canvas in modern browsers. – Parra

Answer 3

<script>
 $(function() 
 {
      $('.map').maphilight({
      fillColor: '008800'
 });
 var data = $('#id').data('maphilight') || {};

 data.alwaysOn = !data.alwaysOn;
 $('#id').data('maphilight', data).trigger('alwaysOn.maphilight');
 });

Mount

This requires the maphilight plugin below, mentioned in Jason Gennaro's answer – Parra

Answer 4

There are two libraries that provide this feature. Both work in the same very non-trivial way - by checking if the browser supports Canvas, then if it does, drawing a Canvas shape, and if it doesn't (i.e. Internet Explorer), drawing VML.

• Maphilight as mentioned above (link that works in 2013)
  • Also includes basic grouping
• ImageMapster (jQuery plugin) which provides this plus other image map features:
  • Scaling image maps (e.g. for use with responsive images)
  • Switching to alternative images within the area
  • Easy tooltips and event binding with lists
  • Grouping

There are some pretty good demos on the ImageMapster site.

Parra

Answer 5

You can add a title so that when someone hover on it, it gets to know about it.

Example:

<area title="amazing" shape="rect" coords="0,0,82,126" alt="cool">

Melda

Answer 6

You can give the underlying div an id and then using javascript to change the divs background color.

      <div id = "myDiv"></div>

and

      document.getElementById("myDiv").style.backgroundColor = "#FFFFFF";

Soughtafter

This doesn't work. It's just another way of applying a CSS style to the element. The style applies successfully and shows up in inspect element / firebug, but makes no difference to the appearance. Nor does setting border or visibility: visible; display: block; etc. – Parra