在 HTML <area> 元素上设置背景颜色？答案

【问题标题】：Set a background color on the HTML <area> element?在 HTML <area> 元素上设置背景颜色？
【发布时间】：2011-10-24 14:22:18
【问题描述】：

有没有办法为 HTML <area> 元素设置背景颜色？我正在创建一个图像地图，当您将鼠标悬停在地图的某些部分上时，它们会弹出一个工具提示，我认为如果我可以为<area> 元素设置背景颜色，那么您会很酷（也很方便）可以看到它们在图像上方的位置。

我已经尝试了背景颜色和边框，但都没有任何效果 - <area> 元素仍然“不可见”。我假设这是因为<area> 是一个自闭合标签，所以它实际上没有任何尺寸？但强制设置高度和宽度也无济于事。

【问题讨论】：

标签： html border background-color imagemap area

【解决方案1】：

你可以给底层的 div 一个 id，然后使用 javascript 来改变 div 的背景颜色。

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

和

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

【讨论】：

这不起作用。这只是将 CSS 样式应用于元素的另一种方式。该样式成功应用并显示在检查元素/萤火虫中，但对外观没有影响。也没有设置border 或visibility: visible; display: block; 等。

【解决方案2】：

你可以用div(set postition:absolute)代替区域

【讨论】：

成功了。我只是使用 div 代替区域，然后将我的工具提示插件附加到 div。像魅力一样工作。谢谢！
这个改变后，div标签如何在map标签中声明？你能粘贴一个示例 div 标签吗？
这肯定会失去使用<map> 和<area> 标签的好处，因为它们可以为点击、鼠标悬停等优化非矩形形状？
@user568458: 没错，这就是为什么您需要在某些应用程序中同时使用和
...
一个例子将不胜感激。尽管我很感激在回复上投入的时间，但上述信息都不是可操作的。我有同样的问题。我想创建一个时区地图，根据存储在数据库中的信息为时区着色。除非我弄错了 div 是矩形的，否则它不会解决问题。如果我将区域放在 div 中，那么 div 会改变颜色，但区域不会。

【解决方案3】：

这似乎不可能。

你可能想看看这个 jQuery 插件：

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

这是一个例子：

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

【讨论】：

插件的链接已关闭，只是重定向到 jQuery 主页 - 我能找到的最佳链接是 davidlynch.org/projects/maphilight - 看起来代码可以通过在 Internet Explorer 中绘制 VML 和在现代浏览器中绘制 HTML Canvas .

【解决方案4】：

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

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

【讨论】：

这需要下面的maphilight插件，在Jason Gennaro的回答中提到

【解决方案5】：

有两个库提供此功能。两者都以同样非常重要的方式工作 - 通过检查浏览器是否支持 Canvas，如果支持，则绘制 Canvas 形状，如果不支持（即 Internet Explorer），则绘制 VML。

Maphilight 如上所述 (link that works in 2013)
- 还包括基本分组
ImageMapster（jQuery 插件），它提供了这个以及其他图像地图功能：
- 缩放图像映射（例如用于响应式图像）
- 切换到区域内的替代图像
- 简单的工具提示和与列表的事件绑定
- 分组

有一些不错的demos on the ImageMapster网站。

【讨论】：

【解决方案6】：

您可以添加一个标题，这样当有人将鼠标悬停在它上面时，它就会知道它。

例子：

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

【讨论】：