Come si evidenziano le parti di una mappa immagine al passaggio del mouse?

Question

Ho bisogno di visualizzare una mappa immagine con circa 70 aree in esso. Si suppone che l'area della mappa dell'immagine in cui si trova il cursore del mouse sia evidenziata in un determinato colore.

Questo è possibile e se sì, come?

Answer 1

Dopo aver effettivamente usarlo in produzione direi che questa è la risposta: http://plugins.jquery.com/project/maphilight

Usando questo ci vogliono alcune righe di codice per implementare quella caratteristica per qualsiasi imagemap.

Answer 2

Sì, questo è possibile. Ho fatto esattamente la cosa con jquery e con gli eventi mouseenter/mouseleave dell'area mappa immagine, ma non con 70 aree. Sarà solo più lavoro per te. Potresti prendere in considerazione il caricamento delle immagini tramite chiamate ajax sul mouseover, o utilizzando uno sprite e il posizionamento in modo da non dover caricare 70 immagini nel 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; 
    }); 

}); 

Dove .map-libra è un div che ha tutte le immagini che si desidera porre sopra la parte superiore della mappa. Puoi posizionarli se necessario o rendere l'immagine delle stesse dimensioni della mappa immagine, ma con trasparenza.

E alcuni html da seguire:

NOTA: Notate come le linee di immagine indice mappa con l'indice IMG all'interno del contenitore carta-aleggia? ANCHE: La mappa immagine deve puntare a un GIF trasparente, e hanno l'immagine di sfondo impostato per l'immagine reale che si desidera visualizzare. Questa è una cosa cross-browser - non riesco a ricordare la ragione esatta.

<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

Non so se c'è un modo intelligente per farlo, ma si potrebbe prendere la vostra immagine di sfondo immagine di un elemento di blocco come, sovrapporre con un quadro trasparente e la mappa immagine e quindi sostituire questo trasparente . immagine su un evento di passaggio del mouse con una foto la zona è evidenziata in

sul fronte dei ribassi avrete bisogno di 70 immagini di aree evidenziate

Answer 4

Ho provato a utilizzare la soluzione di ScottE ma sfortunatamente ciò significava aggiungere l'immagine di destinazione come sfondo del corpo.

La mia soluzione è molto vicino al suo, ma utilizza le immagini corrette

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

}); 

Il concetto chiave qui è che una volta che si entra nella zona del programma, si mostra la mappa-aleggia immagine, che diventa il tuo livello attivo sotto il mouse - Rilevare semplicemente quando lasci quell'immagine è ciò che rende liscio.

HTML: (quasi lo stesso, senza bisogno di 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>