如何在鼠标悬停时设置 JavaScript 样式区域元素？
我有一个包含 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';
}
}
I've got an image map with 20 area elements, only four shown below. I want to style each area so that a blue border appears whenever a user hovers over it - all the area shapes are rectangles.
<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>
I've tried using CSS to style each area, but it's not working. And I've tried to put an onmouseover=color() on the map element and call the following function, but that doesn't seem to be working either:
function color() {
var blueboxes = document.getElementsByTagName('area');
for(var i=0; i<blueboxes.length; i++) {
blueboxes[i].style.border = 'solid blue 5px';
}
}
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
mapper.js 可以用于此目的。
该网站的示例代码：
设置
下载mapper.js 并将其包含到您的网页中。
“wz_jsgraphics.js”的版权归 Walter Zorn 所有，不属于分发范围！
使用它
要获得突出显示，只需将 class="mapper" 添加到 div 包围的图像中即可。
要突出显示各个区域，请向该区域添加一个或多个类。
要获得多个区域选择，请向区域 rel 属性添加一个或多个 id。
使用初始区域的属性强制一组区域。
mapper.js can be used for this.
Sample code from that website:
Setting Up
Download mapper.js and include it into your webpage.
"wz_jsgraphics.js" is copyright by Walter Zorn and not part of the distribution!
Using It
To get the highlighting just add a class="mapper" to an div surrounded image.
To get individual area highlightings add one or more classes to the area.
To get multiple area selections add one or more id's to the areas rel attribute.
To force a group of areas using the attributes of the initial area.
区域标签的样式不能像普通锚点一样。我会使用不同的方法。您可以将图像作为背景图像应用到 div，然后使用position:absolute 将可点击元素放置在 div 上。
看看这个技术：http://www.alistapart.com/articles/cssmaps/
The area tag can't be styled like a normal anchor. I would use a different approach. You could apply your image to a div as the background-image and then position clickable elements over the div by using position: absolute.
Take a look at this technique: http://www.alistapart.com/articles/cssmaps/
Raphaeljs 可以帮忙吗？
看看这个示例:)
Can Raphaeljs helps?
Have a look at this sample :)
通常我看到的方法是用 CSS 中的不同图像构建图像映射本身。这是一个很好的例子：
http://ago.tanfa.co。英国/css/examples/europe-map.html
Usually the approach I see is to build the imagemap itself out of different images in CSS. Here's a good example of this:
http://ago.tanfa.co.uk/css/examples/europe-map.html