Question

是否可以包含一种带有图像映射的透明框？人们会将鼠标悬停在它上面以显示一个可能包含内容的盒子？

我之前想过这个，但不知道该怎么做。

Answer 1

我会说这绝对是可能的。我可能会尝试使用一些jQuery来获取正在悬停的地图元素，然后显示某种跨度。

您也可以将ID设置为特定区域，并将鼠标设置背景设置为您想要的任何内容。（没试过这个，只是想一想）

Answer 2

这是一个简单的例子。这会突出显示一个框，因此只需编辑CSS即可隐藏/显示/定位它。我使用HTML5“data-”元素来存储用于标识事件处理程序中相应元素的数据。

<img width="400" src="http://upload.wikimedia.org/wikipedia/commons/thumb/f/fe/World-map.png/800px-World-map.png" usemap="#demo" border="0">

<map id="map1" name="demo">
<area shape="rect" coords="0,0,100,100" href="#" data-element="a" />
</map>

<div id="a">Info goes here</div>

CSS：

.active {
    border:2px solid #ff0000  
}

JS：

$('#map1 area').on('mouseover',function() {
     var target = $(this).data('element');
     $("#" + target).addClass('active');
})
$('#map1 area').on('mouseout',function() {
     var target = $(this).data('element');
     $("#" + target).removeClass('active');
})

HTML图像映射

2 个答案: