在 HTML <area> 元素上设置背景颜色？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7019947/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Set a background color on the HTML <area> element?
提问by daGUY
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.
有没有办法为 HTML<area>元素设置背景颜色？我正在创建一个图像地图，其中当您将鼠标悬停在地图的某些部分上时会弹出一个工具提示，我认为如果我可以为<area>元素设置背景颜色以便您可以看到它的位置会很酷（而且方便）它们位于图像上方。
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.
我已经尝试了背景颜色和边框，但都没有任何效果 -<area>元素保持“不可见”。我假设这是因为它<area>是一个自闭合标签，所以它实际上没有任何尺寸？但是强制设置高度和宽度也无济于事。
采纳答案by irockman
u can use div(set postition:absolute)instead of area
你可以使用div(set postition:absolute)而不是区域
回答by Jason Gennaro
It doesn't seem possible.
似乎不可能。
You might want to look into this jQuery plugin:
你可能想看看这个 jQuery 插件：
http://plugins.jquery.com/project/maphilight
http://plugins.jquery.com/project/maphilight
Here's an example:
下面是一个例子：
回答by Akhilesh Kumar
<script>
$(function()
{
$('.map').maphilight({
fillColor: '008800'
});
var data = $('#id').data('maphilight') || {};
data.alwaysOn = !data.alwaysOn;
$('#id').data('maphilight', data).trigger('alwaysOn.maphilight');
});
回答by user56reinstatemonica8
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.
有两个库提供此功能。两者都以相同的非常重要的方式工作 - 通过检查浏览器是否支持 Canvas，如果支持，则绘制 Canvas 形状，如果不支持（即 Internet Explorer），则绘制 VML。
- Maphilightas 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
- 上面提到的Maphilight（链接在 2013 年有效）
- 还包括基本分组
- ImageMapster（jQuery 插件），它提供了这个以及其他图像映射功能：
- 缩放图像映射（例如用于响应式图像）
- 切换到区域内的替代图像
- 简单的工具提示和事件绑定列表
- 分组
There are some pretty good demos on the ImageMapstersite.
ImageMapster站点上有一些非常好的演示。
回答by ghost
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">
回答by BlueMeanie
You can give the underlying div an id and then using javascript to change the divs background color.
您可以给底层 div 一个 id，然后使用 javascript 更改 div 的背景颜色。
<div id = "myDiv"></div>
and
和
document.getElementById("myDiv").style.backgroundColor = "#FFFFFF";
