我需要显示一个包含大约 70 个区域的图像地图。鼠标光标当前所在的图像映射区域应该以某种颜色突出显示。
这可能吗?如果可以,怎么做?
在生产中实际使用它之后,我会说这就是答案: http: //plugins.jquery.com/project/maphilight
使用它需要几行代码来为任何图像映射实现该功能。
是的,这是可能的。我已经用 jquery 和图像映射区域 mouseenter / mouseleave 事件做了同样的事情,但不是 70 个区域。这对你来说只会做更多的工作。您可以考虑在鼠标悬停时通过 ajax 调用加载图像,或者使用精灵和定位,这样您就不需要将 70 个图像加载到 dom 中。
jQuery:
$(document).ready(function() {
$(".map-areas area").mouseenter(function() {
var idx = $(".map-areas area").index(this);
$(".map-hovers img:eq(" + idx + ")").show();
return false;
}).mouseleave(function() {
$(".map-hovers img").hide();
return false;
});
});
其中 .map-hovers 是一个 div,其中包含您想要放置在地图顶部的所有图像。如有必要,您可以定位它们,或者使图像与图像贴图大小相同,但具有透明度。
还有一些要遵循的html:
注意:注意图像地图区域索引如何与地图悬停容器中的 img 索引对齐?另外:图像映射必须指向透明 gif,并将背景图像设置为您要显示的实际图像。这是一个跨浏览器的事情 - 不记得确切的原因。
<div id="container">
<img src="/images/trans.gif" width="220" height="238" class="map-trans" alt="Map / Carte" usemap="#region-map" />
<div class="map-hovers">
<img src="/images/map/sunset-country.png" alt="Sunset Country" />
<img src="/images/map/north-of-superior.png" alt="North of Superior" />
<img src="/images/map/algomas-country.png" alt="Algoma's Country" />
<img src="/images/map/ontarios-wilderness.png" alt="Ontario's Wilderness" />
<img src="/images/map/rainbow-country.png" alt="Rainbow Country" />
<img src="/images/map/ontarios-near-north.png" alt="Ontario's Near North" />
<img src="/images/map/muskoka.png" alt="Muskoka" />
</div>
</div>
<map name="region-map" id="region-map" class="map-areas">
<area shape="poly" coords="52,19,53,82,36,114,34,126,26,130,5,121,2,110,7,62" href="#d0" alt="Sunset Country" />
<area shape="poly" coords="93,136,93,113,82,112,77,65,57,51,58,82,41,122,33,133,58,138,74,126" href="#d1" alt="North of Superior" />
<area shape="poly" coords="98,112,118,123,131,149,130,165,108,161,97,138" href="#d2" alt="Algoma's Country" />
<area shape="poly" coords="68,2,100,29,124,33,133,74,155,96,159,145,134,146,121,119,101,110,83,107,83,65,55,45,54,16" href="#d3" alt="Ontario's Wilderness" />
<area shape="poly" coords="151,151,152,167,157,176,152,179,137,178,124,172,133,169,135,150" href="#d4" alt="Rainbow Country" />
<area shape="poly" coords="160,150,170,167,169,173,160,171,155,162,153,149" href="#d5" alt="Ontario's Near North" />
<area shape="poly" coords="173,176,162,177,154,184,167,189,178,183" href="#d6" alt="Muskoka" />
</map>
1.Step:Add jquery.min.js
2.Step:Add jquery.maphilight.js
3.Step:Add the $('.map').maphilight();
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/maphilight/1.4.0/jquery.maphilight.min.js"></script>
<script type="text/javascript">
$(function() {
$('.map').maphilight();
});
</script>
<body>
<div>
<div class="imginfo"><span></span></div>
<img src="https://upload.wikimedia.org/wikipedia/commons/d/de/Windows_live_square.JPG" usemap="#image-map" class="map">
<map name="image-map">
<area target="" alt="" title="" href="" coords="0,0,144,146" shape="rect">
<area target="" alt="" title="" href="" coords="152,1,299,146" shape="rect">
<area target="" alt="" title="" href="" coords="2,149,143,299" shape="rect">
<area target="" alt="" title="" href="" coords="152,152,300,299" shape="rect">
</map>
</div>
</body>
</html>
我尝试使用 ScottE 的解决方案,但不幸的是,这意味着将目标图像添加为身体背景。
我的解决方案与他的非常接近,但使用了正确的图像
jQuery:
$(document).ready(function() {
$(".map-areas area").mouseenter(function() {
var idx = $(".map-areas area").index(this);
$(".map-hovers img:eq(" + idx + ")").show();
return false;
});
$(".map-hovers img").mouseleave(function() {
$(".map-hovers img").hide();
return false;
});
});
这里的关键概念是,一旦您进入地图区域,您就会显示地图悬停图像,然后该图像将成为鼠标下的活动层 - 只需检测您何时离开该图像即可平滑。
HTML:(几乎一样,不需要trans image)
<div id="container">
<img src="/images/full-map.png" width="220" height="238" class="map-trans" alt="Map / Carte" usemap="#region-map" />
<div class="map-hovers">
<img src="/images/map/sunset-country.png" alt="Sunset Country" />
<img src="/images/map/north-of-superior.png" alt="North of Superior" />
<img src="/images/map/algomas-country.png" alt="Algoma's Country" />
<img src="/images/map/ontarios-wilderness.png" alt="Ontario's Wilderness" />
<img src="/images/map/rainbow-country.png" alt="Rainbow Country" />
<img src="/images/map/ontarios-near-north.png" alt="Ontario's Near North" />
<img src="/images/map/muskoka.png" alt="Muskoka" />
</div>
</div>
<map name="region-map" id="region-map" class="map-areas">
<area shape="poly" coords="52,19,53,82,36,114,34,126,26,130,5,121,2,110,7,62" href="#d0" alt="Sunset Country" />
<area shape="poly" coords="93,136,93,113,82,112,77,65,57,51,58,82,41,122,33,133,58,138,74,126" href="#d1" alt="North of Superior" />
<area shape="poly" coords="98,112,118,123,131,149,130,165,108,161,97,138" href="#d2" alt="Algoma's Country" />
<area shape="poly" coords="68,2,100,29,124,33,133,74,155,96,159,145,134,146,121,119,101,110,83,107,83,65,55,45,54,16" href="#d3" alt="Ontario's Wilderness" />
<area shape="poly" coords="151,151,152,167,157,176,152,179,137,178,124,172,133,169,135,150" href="#d4" alt="Rainbow Country" />
<area shape="poly" coords="160,150,170,167,169,173,160,171,155,162,153,149" href="#d5" alt="Ontario's Near North" />
<area shape="poly" coords="173,176,162,177,154,184,167,189,178,183" href="#d6" alt="Muskoka" />
</map>
我不知道是否有一种很酷的方法,但是您可以将图片作为块元素的背景图像,用透明图片和图像映射覆盖它,然后在鼠标悬停事件上将透明图片替换为图片中突出显示的区域。
不利的一面是,您需要 70 张突出显示区域的图像