Set a background color on the HTML 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.

score 3 · Answer 1 · answered Aug 11 '11 at 02:16

3

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#

answered Aug 11 '11 at 02:16

Jason Gennaro

34,535
8
65
86

The link to the plugin is down, just redirects to jQuery homepage - the best link I can find is http://davidlynch.org/projects/maphilight/ - looks like the code works by drawing VML in internet explorer and HTML Canvas in modern browsers. – user56reinstatemonica8 Aug 28 '13 at 16:09

score 2 · Accepted Answer · edited Aug 11 '11 at 16:07

2

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

edited Aug 11 '11 at 16:07

agf

171,228
44
289
238

answered Aug 11 '11 at 02:00

irockman

72
1

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! – daGUY Aug 11 '11 at 02:21
1

How would the div tag be declared in the map tag after this change? can you paste a sample div tag? – pri_dev Feb 26 '12 at 00:36
4

Surely this would lose the benefit of using `` and `` tags which is they refine non-rectangular shapes for clicking, mouseover etc? – user56reinstatemonica8 Aug 28 '13 at 16:12
@user568458: Exactly, and that's why you need to use both and
for certain kind of applications...
– Marcus Dec 20 '13 at 07:19
1

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. – Peter Mar 22 '17 at 20:29

score 1 · Answer 3 · answered Oct 25 '12 at 09:59

1

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

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

answered Oct 25 '12 at 09:59

Akhilesh Kumar

849
1
15
28

This requires the maphilight plugin below, mentioned in Jason Gennaro's answer – user56reinstatemonica8 Aug 28 '13 at 16:11

score 0 · Answer 4 · answered Aug 30 '13 at 15:30

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.

score -2 · Answer 5 · edited Sep 28 '14 at 11:37

-2

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">

edited Sep 28 '14 at 11:37

Şafak Gezer

3,928
3
47
49

answered Sep 28 '14 at 10:15

ghost

11

score -3 · Answer 6 · edited Dec 20 '13 at 07:29

-3

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";

edited Dec 20 '13 at 07:29

Marcus

1,222
2
13
22

answered Aug 11 '11 at 01:53

BlueMeanie

148
1
1
10

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. – user56reinstatemonica8 Aug 28 '13 at 16:19

Set a background color on the HTML element?

6 Answers6

Linked