你如何在鼠标悬停时设置 Javascript 样式区域元素？答案

【问题标题】：How do you JavaScript style area elements on mouseover?你如何在鼠标悬停时设置 Javascript 样式区域元素？
【发布时间】：2011-04-27 03:23:01
【问题描述】：

我有一个包含 20 个区域元素的图像地图，下面只显示了四个。我想为每个区域设置样式，以便每当用户将鼠标悬停在它上面时就会出现蓝色边框 - 所有区域形状都是矩形。

<map id="mymap" name="mymap">
    <area shape="rect" coords="0,0,223,221" href="http://..." />
    <area shape="rect" coords="226,0,448,221" href="http://..." />
    <area shape="rect" coords="451,0,673,223" href="http://..." />
    <area shape="rect" coords="677,0,1122,223" href="http://..." />
    ...
</map>

我尝试过使用 CSS 来设置每个区域的样式，但它不起作用。我尝试在地图元素上放置一个onmouseover=color() 并调用以下函数，但这似乎也不起作用：

function color() {
    var blueboxes = document.getElementsByTagName('area');
    for(var i=0; i<blueboxes.length; i++) {
        blueboxes[i].style.border = 'solid blue 5px';
    }
}

【问题讨论】：

标签： javascript css javascript-events area

【解决方案1】：

mapper.js 可以用于此。

Mapper.js 2.4 允许您向网页上的图像地图添加自动区域突出显示（包括导出到 SVG）。它适用于所有主流浏览器 - Mozilla Firefox 1.5+、Opera 9+、Safari 和 IE6+。在较旧的浏览器上，它可以使用"jsgraphics" from Walter Zorn（如果已安装），否则它会降级并且您的访问者不会注意到任何事情。

来自该网站的示例代码：

请注意，此行以下的所有内容都是他的代码和措辞，而不是我的。完整的归属于上面的链接。

设置

下载 mapper.js 并将其包含到您的网页中。

<script type="text/javascript" src="wz_jsgraphics.js"></script>
<script type="text/javascript" src="mapper.js"></script>

“wz_jsgraphics.js”是 Walter Zorn 的版权，不是分发的一部分！

使用它

要获得突出显示，只需将 class="mapper" 添加到 div 包围的图像中。

<div>
<img src="..." class="mapper" usemap="..." alt="...">
</div>

要获得单个区域的突出显示，请向该区域添加一个或多个类。

<map>
...
<area shape="poly" class="noborder icolor00ff00" href="#" coords="...">
...
</map>

要获得多个区域选择，请在区域 rel 属性中添加一个或多个 id。

<map>
...
<area shape="poly" id="blue" rel="green,red" href="#" coords="...">
<area shape="poly" id="green" rel="red,blue" href="#" coords="...">
<area shape="poly" id="red" rel="green,blue" href="#" coords="...">
...
</map>

使用初始区域的属性强制一组区域。

<map>
...
<area shape="rect" id="black" class="icolor000000 forcegroup" rel="green,red,blue" href="#" coords="...">
...
</map>

【讨论】：

【解决方案2】：

区域标签的样式不能像普通锚一样。我会使用不同的方法。您可以将图像作为背景图像应用到 div，然后使用 position: absolute 将可点击元素定位在 div 上。

看看这个技巧：http://www.alistapart.com/articles/cssmaps/

【讨论】：

【解决方案3】：

Raphaeljs 可以帮忙吗？

看看this sample :)

【讨论】：

这将如何帮助尝试使用图像映射的人？ Raphaël 是一个 SVG 库。

【解决方案4】：

通常我看到的方法是用 CSS 中的不同图像构建图像映射本身。这是一个很好的例子：

http://ago.tanfa.co.uk/css/examples/europe-map.html

【讨论】：

是的，但我认为他正在尝试将这个概念改造成现有的图像映射解决方案。我也希望自己也能在 CSS 中看到一些东西。毕竟，这就是 Bing 的做法。
是的，我真的很想避免将所有这 20 个不同的区域拼接成图像。找个 JS 解决方案，下面这个很牛逼。