Question

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

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

Answer 1

似乎不可能。

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

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

以下是一个例子：

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

Answer 2

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

Answer 3

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

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

Answer 4

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

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

有一些非常好的demos on the ImageMapster网站。

Answer 5

您可以为底层div提供id，然后使用javascript更改div背景颜色。

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

和

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

Answer 6

您可以添加标题，以便当有人悬停在标题上时，它会了解它。

示例：

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

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

6 个答案: