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

Question

有没有办法为HTML <area> 元素设置背景颜色？我正在创建一个图像映射，其中地图的某些部分将在鼠标移到它们上面时弹出提示信息。我认为如果可以为<area>元素设置一个背景颜色，这既很酷又方便，因此我想知道是否有办法。

我尝试了background-color和border这两种方法，但是都没有效果-<area>元素仍然“看不见”。我猜这是因为<area>是一个自闭合标签，所以它实际上没有任何维度吗？但是强制设置高度和宽度也没有帮助。

- daGUY

Answer 1

看起来似乎不可能。

您可能需要查看这个jQuery插件：

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

这是一个例子：

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

- Jason Gennaro

---

插件的链接已经失效，只会重定向到jQuery主页 - 我能找到的最好的链接是http://davidlynch.org/projects/maphilight/ - 看起来这个代码通过在Internet Explorer中绘制VML和在现代浏览器中绘制HTML Canvas来工作。 - user56reinstatemonica8

Answer 2

你可以使用 div（设置position:absolute） 替代 area。

- irockman

---

成功了。我只是用 div 替换了 area，然后将我的工具提示插件附加到 div 上。效果非常好。谢谢！ - daGUY

这个变化后，div标签应该如何在map标签中声明？你能贴一下一个div标签的示例吗？ - pri_dev

这肯定会失去使用<map>和<area>标签的好处，这些标签可以精确地定义非矩形的形状，以进行点击、鼠标悬停等操作。 - user56reinstatemonica8

@user568458：确切地说，这就是为什么在某些类型的应用程序中需要同时使用<area>和<div>的原因... - Marcus

请提供一个示例。虽然我很感激您花费的时间回复，但以上信息都无法实施。我有同样的问题。我想创建一个时区地图，根据存储在数据库中的信息对时区进行着色。除非我弄错了，div是矩形的，所以它不能解决问题。如果我将该区域放入div中，则div将更改颜色，但该区域不会更改颜色。 - Peter

Answer 3

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

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

- Akhilesh Kumar

---

这需要下面的maphilight插件，Jason Gennaro的答案中提到了它。 - user56reinstatemonica8

Answer 4

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

• Maphilight如上所述（2013年可用的链接)
  • 还包括基本分组
• ImageMapster （jQuery插件）提供此功能以及其他图像映射功能：
  • 缩放图像地图（例如用于响应式图像）
  • 在区域内切换到替代图像
  • 易于使用列表的提示和事件绑定
  • 分组

ImageMapster网站上有一些相当不错的演示。

- user56reinstatemonica8

Answer 5

你可以添加一个标题，这样当有人悬停在上面时，就可以了解它的内容。

示例：

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

- ghost

Answer 6

你可以给底层 div 元素一个 ID，然后使用 JavaScript 来改变该元素的背景颜色。

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

并且

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

- BlueMeanie

---

这个不起作用。这只是将CSS样式应用到元素的另一种方式。该样式成功应用并显示在检查元素/火狐浏览器中，但对外观没有任何影响。设置border或visibility: visible; display: block;等也没有效果。 - user56reinstatemonica8