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

Question

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

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

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 如上所述（2013 年有效的链接）
  • 还包括基本分组
• ImageMapster （jQuery 插件），它提供这加上其他图像映射功能：
  • 缩放图像地图（例如用于响应式图像）
  • 切换到区域内的替代图像
  • 简单的工具提示和事件与列表绑定
  • 分组

有一些非常好的 ImageMapster 站点上的演示。

Answer 5

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

例子：

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

Answer 6

您可以给底层 div 一个 id，然后使用 javascript 更改 div 背景颜色。

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

和

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