마우스 오버시 이미지 맵의 일부분을 강조 표시하려면 어떻게합니까?

Question

약 70 개의 영역이있는 이미지 맵을 표시해야합니다. 마우스 커서가 현재 위치한 이미지 맵의 영역은 특정 색상으로 강조 표시됩니다.

가능하며 가능하다면 어떻게합니까?

Answer 1

을해야하는 대답입니다 : http://plugins.jquery.com/project/maphilight

이것을 사용하면 모든 이미지 맵에 대해 해당 기능을 구현하는 데 몇 줄의 코드가 필요합니다.

Answer 2

예, 가능합니다. jquery와 이미지 맵 영역 mouseenter/mouseleave 이벤트를 사용하여 정확한 결과를 얻었지만 70 개 영역은 아닙니다. 그것은 단지 당신을 위해 더 많은 일이 될 것입니다. 마우스 오버시 ajax 호출을 통해 이미지를로드하거나 스프라이트와 위치 지정을 사용하여 dom에 70 개의 이미지를로드 할 필요가 없습니다.

JQuery와 :

.MAP - 마우스 오버하면지도 위에 걸치하고자하는 모든 이미지가 사업부는

$(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; 
    }); 

}); 

. 필요한 경우 이미지를 배치하거나 이미지를 이미지 맵과 동일한 크기로 만들 수 있지만 투명하게 만들 수 있습니다.

그리고 일부 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> 

Answer 3

그것을 할 수있는 멋진 방법이 있는지 모르겠어요,하지만 당신은, 블록 요소의 배경 이미지로 사진을 찍을 투명한 영상과 이미지지도를 오버레이하고이 투명을 대체 할 수 . 영역이 강조 표시됩니다 사진에 마우스 오버 이벤트에 사진

을 단점에 당신이 실제로 내가이 말 것 생산에서 사용 후 강조 영역

70 개 이미지

Answer 4

나는 ScottE의 솔루션을 사용하려고했지만 불행히도 대상 이미지를 신체 배경으로 추가해야한다는 것을 의미했습니다. ,

당신은지도 지역을 입력하면, 당신이 보여 해당 이미지를지도 - 놓을

$(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; 
    }); 

}); 

여기서 중요한 개념입니다 :

내 솔루션

jQuery를 자신의 매우 가까운,하지만 적절한 이미지

사용 그러면 마우스 아래의 활성 레이어가됩니다 - 이미지를 떠날 때 단순히 감지하는 것이 매끄러운 것입니다.

HTML : (거의 동일, 트랜스 이미지가 필요)

<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>