Set a background color on the HTML <area> el

问题:

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.

回答1:

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

回答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#

回答3:

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

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

回答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.

回答5:

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

回答6:

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