Eseguo una piccola pagina Web che consente agli utenti di fare clic su vari collegamenti utilizzando le mappe immagine. Vorrei evidenziare la sezione su cui un utente fa clic per fornire un feedback all'utente (potrebbero fare rapidamente clic su diverse parti rapidamente).Evidenziare una sezione di un'immagine in JavaScript
C'è un modo per invertire (o in altro modo evidenziare) una piccola sezione di un'immagine JavaScript?
Grazie,
Invece di utilizzare mappe immagine, si potrebbe provare questo metodo CSS:
Utilizzare un trasparente <div> in cima a ogni "immagine-mappa" parte (link), e quindi utilizzare il CSS :hover pseudo-classe per gestire l'evidenziazione.
CSS:
#image {
position: relative;
width: 400px;
height: 100px;
background-image: url(image_map.png);
}
#map-part {
position: absolute;
top: 10px;
left: 10px;
width: 50px;
height: 50px;
background-color: transparent;
}
#map-part:hover {
background-color: yellow; /* Yellow Highlight On Hover */
opacity: 0.2;
filter: alpha(opacity=20);
}
HTML:
<div id="image">
<a id="map-part" href="http://www.example.com/"></a>
</div>
Si noti che questo funziona solo per i collegamenti rettangolari.
+1 per l'opzione CSS puro, anche se non sta invertendo l'immagine. –
+1 soluzione molto intelligente – Xavi
Grazie, ha funzionato. Per i link a, ho usato "display: block" e margin-top e margin-left invece di top e left, quindi le coordinate sono relative. –
Dai uno sguardo allo jQuery MapHilight.
Non sono sicuro che faccia esattamente ciò di cui hai bisogno, ma puoi ottenerlo con piccoli aggiustamenti.
+1 bel plugin! –
Fare riferimento a questo esempio per l'utilizzo di MapHilight: http://stackoverflow.com/a/17614118/2313371 –
Come sovrapporre un blocco semitrasparente <DIV> all'area cliccata per evidenziarlo?
Ci sono molti modo,
In un certo senso d moda, scomporre le immagini in tanti pezzi più piccoli e con tavolo per combinarli. Successivamente, usando javascript per sostituire l'attributo "src" per l'effetto highlight.
In un altro modo CSS, utilizzare CSS per ritagliare l'alt. sull'immagine sopra l'originale e controlla quale area deve essere visibile.
È meglio avere una singola immagine per tutte, piuttosto che molte piccole immagini per accelerare e l'utente la otterrà immediatamente dalla rete.
C'è, ma si prega di essere più specifici circa le dimensioni dell'area e come si determina l'area. È solo un quadrato intorno a cui fanno clic o ci sono solo aree particolari? Vuoi solo disegnare una scatola dove fosse la mappa delle immagini? –