Question

我有一个带有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';
    }
}

Answer 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>

Answer 2

区域标记不能像普通锚一样设置样式。我会用另一种方法。您可以将图像作为背景图像应用于div，然后使用position：absolute将可点击元素放在div上。

看一下这种技巧：http://www.alistapart.com/articles/cssmaps/

Answer 3

可Raphaeljs有帮助吗？

查看this sample：）

Answer 4

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

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

你如何在mouseover上的Javascript样式区域元素？

4 个答案:

该网站的示例代码：