javascript - 您如何在鼠标悬停时使用 JavaScript 样式区域元素？

Question

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

<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 来设置每个区域的样式，但它不起作用。我尝试在 map 元素上放置一个 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 allows you to add automatic area highlighting to image maps on your webpages (inc. export to SVG).It works in all the major browsers - Mozilla Firefox 1.5+, Opera 9+, Safari and IE6+. On older browsers, it can use "jsgraphics" from Walter Zorn (if installed), else it'll degrade and your visitors won't notice a thing.

该网站的示例代码:

Please note that everything below this line is his code and wording, not mine. Full attribution belongs to the link above.

设置

下载 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>

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

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