Jak wyróżnić części mapy obrazów po najechaniu kursorem myszy?

Question

Potrzebuję wyświetlić imagemap z około 70 obszarów w nim. Obszar obrazu, w którym obecnie znajduje się kursor myszy, powinien być podświetlony w określonym kolorze.

Czy to możliwe, a jeśli tak, to w jaki sposób?

Answer 1

Po faktycznie go używać w produkcji powiedziałbym, że to jest odpowiedź: http://plugins.jquery.com/project/maphilight

Korzystanie z tego wymaga kilku linii kodu, aby zaimplementować tę funkcję dla dowolnej mapy.

Answer 2

Tak, jest to możliwe. Dokładnie zrobiłem z jquery i zdarzeniami mouseenter/mouseleave obszaru mapy obrazu, ale nie z 70 obszarami. To będzie po prostu więcej pracy dla ciebie. Możesz rozważyć ładowanie obrazów przez wywołania ajax na mouseover lub użycie ikonki i pozycjonowania, aby nie ładować 70 obrazów do domu.

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

}); 

Gdzie .map-zawisa jest div, który ma wszystkie obrazy, które chcesz położyć na wierzch mapie. Możesz je ustawić, jeśli to konieczne, lub zrobić obraz taki sam jak mapa obrazu, ale z przezroczystością.

A niektóre html do naśladowania:

UWAGA: Zauważ, że linie obrazu indeksu obszar mapa z indeksem img wewnątrz kontenera map-unosi? RÓWNIEŻ: Mapa obrazu musi wskazywać przezroczysty gif i mieć obraz tła ustawiony na rzeczywisty obraz, który chcesz wyświetlić. Jest to sprawa z wieloma przeglądarkami - nie pamiętam dokładnego powodu.

<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

Nie wiem, czy jest jakiś fajny sposób, aby to zrobić, ale można zrobić zdjęcie jako obraz tła elementu blokowego, nałożyć go z przezroczystego obrazu i obraz mapy, a następnie zastąpić ten przezroczysty . obraz na zdarzenia mouseover z obrazem obszar jest podświetlona w

na minus trzeba 70 obrazów wyróżnionych obszarów

Answer 4

Próbowałem użyć rozwiązania ScottE, ale niestety oznaczało to dodanie docelowego obrazu jako tła ciała.

Moje rozwiązanie jest bardzo blisko jego, ale wykorzystuje odpowiednie obrazy

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

}); 

Kluczowym pojęciem jest tu, że po wejściu do obszaru mapy, można pokazać mapę-unosi obraz która staje się twoją aktywną warstwą pod myszką - Po prostu wykrycie, kiedy zostawisz ten obraz, sprawia, że ​​jest gładka.

HTML: (prawie taka sama, nie ma potrzeby trans obrazu)

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