4

我有一个包含 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';
    }
}
4

4 回答 4

3

mapper.js可用于此。

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

该网站的示例代码：

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

配置

下载 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>
于 2010-10-18T19:59:51.560 回答
1

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

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

于 2010-10-18T20:06:02.963 回答
0

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

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

于 2010-10-18T20:01:40.483 回答
0

Raphaeljs可以帮忙吗？

看看这个样本:)

于 2010-10-18T19:52:20.487 回答