Html 图像悬停在区域 <map> 上
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15649184/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Image hover when over area <map>
提问by user1899891
Im trying to get different images to load when hovering over the different image map zones. Is this even possible with htlm/css or java? If so how?
当鼠标悬停在不同的图像地图区域时，我试图加载不同的图像。这甚至可以使用 htlm/css 或 java 吗？如果是这样怎么办？
Thanks
谢谢
Here's my code so far:
到目前为止，这是我的代码：
<img id="navbar" src="img/index-navbar.png" usemap="#navmap"/>
<map name="navmap">
<area id="index-hover" shape="poly" coords="0,113,125,77,126,129,0,168,0,113" href="index.html" alt="" title="" />
<area id="selfstudy-hover" shape="poly" coords="127,77,281,66,271,118,128,129,127,77" href="selfstudy.html" alt="" title="" />
<area id="exhibits-hover" shape="poly" coords="284,66,432,73,433,123,274,118,284,66" href="exhibits.html" alt="" title="" />
<area shape="poly" coords="434,73,602,87,593,138,435,123,434,73" href="committees.html" alt="" title="" />
<area shape="poly" coords="605,88,787,98,788,150,597,139,605,88" href="newsletters.html" alt="" title="" />
<area shape="poly" coords="789,98,852,95,959,59,959,114,887,143,789,151,789,98" href="selfstudy-design.html" alt="" title="" />
</map>
回答by James Daly
hopefully this helps, i did something like this years ago on specialolympics.org
希望这会有所帮助，我几年前在 specialolympics.org 上做过类似的事情
your html
你的html
<div class="world_map_container">
<img src="http://www.specialolympics.org/RegionsImages/map/transparent.gif" usemap="#the_world_map" id="transparent_map">
<img src="http://www.specialolympics.org/RegionsImages/map/world_map.png"><map name="the_world_map" id="the_world_map">
<area shape="poly" coords="69,86,83,71,83,51,70,30,52,16,18,36,5,53,23,74,53,83," href="http://www.specialolympics.org/Regions/north-america/_Region-Front/North-America.aspx" id="area_northamerica">
<area shape="poly" coords="63,94,77,89,99,99,87,138,72,138,63,108," href="http://www.specialolympics.org/Regions/latin-america/_Region-Front/Latin-America.aspx" id="area_southamerica">
<area shape="poly" coords="120,70,178,63,220,60,262,57,232,28,191,29,147,32,122,62," href="http://www.specialolympics.org/Regions/europe-eurasia/_Region-Front/Europe-Eurasia.aspx" id="area_eurasia">
<area shape="poly" coords="115,94,134,92,146,90,167,99,160,122,131,125,120,106," href="http://www.specialolympics.org/Regions/africa/_Region-Front/Africa.aspx" id="area_africa">
<area shape="poly" coords="112,84,137,87,152,87,152,80,139,74,120,79," href="http://www.specialolympics.org/Regions/middle-east-north-africa/_Region-Front/Middle-East-North-Africa.aspx" id="area_middleeast">
<area shape="poly" coords="209,68,202,71,190,73,186,81,195,85,206,88,216,84,216,75," href="http://www.specialolympics.org/Regions/east-asia/_Region-Section-Front/East-Asia.aspx" id="area_eastasia">
<area shape="poly" coords="192,96,218,91,248,100,259,132,218,133,199,120,197,110," href="http://www.specialolympics.org/Regions/asia-pacific/_Region-Front/Asia-Pacific.aspx" id="area_asiapacific">
</map>
<ul>
<li id="northamerica" style=""><a href="#">north america</a></li>
<li id="southamerica"><a href="#">south america</a></li><li id="eurasia"><a href="#">eurasia</a></li>
<li id="africa"><a href="#">Africa</a></li><li id="middleeast"><a href="#">Middle East</a></li>
<li id="eastasia"><a href="#">East Asia</a></li><li id="asiapacific"><a href="#">Asia Pacific</a></li>
</ul>
</div>
your css
你的CSS
div.world_map_container #transparent_map {
border: medium none;
height: 140px;
position: absolute;
width: 270px;
z-index: 30;
}
ul li {
display: none;
position: absolute;
text-indent: -9999px;
z-index: 20;
}
#northamerica {
background: url("/RegionsImages/map/north_america.png") no-repeat scroll 0 0 transparent;
height: 140px;
right: 0;
top: 0;
width: 270px;
}
#southamerica {
background: url("/RegionsImages/map/south_america.png") no-repeat scroll 0 0 transparent;
height: 140px;
right: 0;
top: 0;
width: 270px;
}
your js
你的js
$('.world_map_container area').each(function () {
// Assigning an action to the mouseover event
$(this).mouseover(function (e) {
var country_id = $(this).attr('id').replace('area_', '');
$('#' + country_id).css('display', 'block');
});
// Assigning an action to the mouseout event
$(this).mouseout(function (e) {
var country_id = $(this).attr('id').replace('area_', '');
$('#' + country_id).css('display', 'none');
});
});
you can see on this site now on the right rail http://specialolympics.org/
你现在可以在这个网站上看到右轨http://specialolympics.org/
essentially you place a transparent image over the load image and you switch out map area on the hover and replace with each background area.
本质上，您在加载图像上放置了一个透明图像，然后在悬停时切换地图区域并替换为每个背景区域。
回答by kristina childs
I did something similar to this yeeeeeaaaaaarrrrssss ago using CSS and JS. View and deconstruct the code here.
我之前使用 CSS 和 JS 做了一些类似于这个 yeeeeeaaaaaarrrrsss 的事情。在此处查看和解构代码。
You could probably do it with pure CSS these days as there's unified browser support for it. I would do absolutely positioned divs over a background and then use a {display: none;} a:hover {display: block;}to make your images show up. Image maps are soooo 20th century ;)
这些天你可能可以用纯 CSS 来做，因为有统一的浏览器支持。我会在背景上做绝对定位的 div，然后a {display: none;} a:hover {display: block;}用来让你的图像显示出来。图像地图太 20 世纪了；)
...unless of course you want them to do things onClick, which would still require JavaScript.
...当然，除非您希望他们在 onClick 上执行操作，否则仍然需要 JavaScript。
