当面积< map> [英] Image hover when over area <map>

问题描述

尝试将鼠标悬停在不同的图像地图区域时，尝试获取不同的图片。这是甚至可能与htlm / css或java？

感谢

到目前为止，我的代码如下：

 < img id =navbarsrc =img / index-navbar.pngusemap =＃navmap/> 
< map name =navmap> 
< area id =index-hovershape =polycoords =0,113,125,77,126,129,0,168,0,113href =index.htmlalt =title =/> 
< area id =selfstudy-hovershape =polycoords =127,77,281,66,271,118,128,129,127,77href =selfstudy.htmlalt =title =/> 
< area id =exhibits-hovershape =polycoords =284,66,432,73,433,123,274,118,284,66href =exhibits.htmlalt =title =/> 
< area shape =polycoords =434,73,602,87,593,138,435,123,434,73href =committees.htmlalt =title =/> 
< area shape =polycoords =605,88,787,98,788,150,597,139,605,88href =newsletters.htmlalt =title =/> 
< area shape =polycoords =789,98,852,95,959,59,959,114,887,143,789,151,789,98href =selfstudy-design.htmlalt =title =/> 
< / map> 
  

解决方案

希望这有助于， on specialolympics.org

您的HTML

 < div class = world_map_container> 
< img src =http://www.specialolympics.org/RegionsImages/map/transparent.gifusemap =＃the_world_mapid =transparent_map> 
< img src =http://www.specialolympics.org/RegionsImages/map/world_map.png>< map name =the_world_mapid =the_world_map> 
< area shape =polycoords =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.aspxid =area_northamerica> 
< area shape =polycoords =63,94,77,89,99,99,87,138,72,138,63,108，href =http://www.specialolympics.org/Regions/latin -america / _Region-Front / Latin-America.aspxid =area_southamerica> 
< area shape =polycoords =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.aspxid =area_eurasia> 
< area shape =polycoords =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 =polycoords =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.aspxid =area_middleeast> 
< area shape =polycoords =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.aspxid =area_eastasia> 
< area shape =polycoords =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 =northamericastyle =>< a href =＃>北美洲< / a>< / li> 
< li id =southamerica>< a href =＃>南美< / a>< / li>< li id =eurasia>< a href = ＃> eurasia< / a>< / li> 
< li id =africa>< a href =＃>非洲< / a>< / li>< li id =middleeast>< a href = ＃>中东< / a>< / li> 
< li id =eastasia>< a href =＃>东亚< / a>< / li>< li id =asiapacific>< a href = ＃>亚太地区< / a>< / li> 
< / ul> 
< / div> 
  

您的css

 code> div.world_map_container #transparent_map {
 border：medium none; 
 height：140px; 
 position：absolute; 
 width：270px; 
 z-index：30; 
} 
 
 ul li {
 display：none; 
位置：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; 
} 
  

您的js

  $（'world_map_container area'）。each（function（）{
 //为鼠标悬停事件分配一个动作
 $（this）.mouseover （e）{
 var country_id = $（this）.attr（'id'）。replace（'area_'，''）; 
 $（'＃'+ country_id）.css '，'block'）; 
}）; 
 
 //为mouseout事件分配一个动作
 $（this）.mouseout（function（e）{
 var country_id = $（this）.attr（'id'）。replace（'area_'，''）; 
 $（'＃'+ country_id）.css（'display'，'none'）; 
}）; 
 
}）; 
  

您现在可以在此网站上查看 http://specialolympics.org/

本质上，你会在加载图片上放置一个透明图片，悬停并替换为每个背景区域。

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?

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>

解决方案

hopefully this helps, i did something like this years ago on specialolympics.org

your 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

 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

      $('.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/

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.

这篇关于当面积< map>的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！