Javascript Passa il mouse sopra la parte visibile dell'immagine PNG

Esiste un modo per verificare se il mouse si trova su una parte visibile di un'immagine PNG?Javascript Passa il mouse sopra la parte visibile dell'immagine PNG

Ogni sezione è propria immagine è con uno sfondo trasparente come:

Quindi, fondamentalmente voglio l'opacità di ciascuna regione per essere uno quando si libra, e l'opacità essere 0,5 quando non ci si libra sopra. Pertanto, l'utente può vedere su quale regione è stata posizionata il mouse.

c'è qualcosa come onmouseover se la posizione del mouse sull'immagine! = Trasparente allora ...

fonte

2015-10-28 Friedpanseller

Non c'è modo di fare questo con un PNG semplice - l'evento hover è sparato sull'intera immagine, non su aree opache. L'utilizzo di SVG sarebbe più adatto a ciò che desideri. Puoi anche usare una mappa immagine, ma è molto obsoleto. –

Prova mappa immagine! www.image-maps.com/ Dai un'occhiata a www.galerijaziema.lv/ziema.php – Kristine

Hey Rory! Se ho delle versioni SVG delle immagini, come faccio a farlo funzionare? Posso convertire tutti gli SVG in Illustrator – Friedpanseller

Dai un'occhiata alla http://www.w3schools.com/tags/tag_area.asp

È possibile scattare immagini e otterrete cordoni di ogni poli utilizzando qualche immagine strumento come Photoshop ecc. e puoi gestire ogni evento hover per un'area specifica nel tag area per Immagine.

Semplicemente facile da usare e per rendere la mappa cliccabile.

fonte

2015-10-28 14:09:13

Ho usato il link www.image-maps.com di Kirstine per ottenere tutte le coordinate, quindi ho usato il tag dell'area della mappa per mappare una regione! Grazie! – Friedpanseller

Take specific image in two copy.one before href link and next next href link images.. 


<script type='text/javascript'> 
    $(document).ready(function() 
     { 
    $(".button").hover(function() 
     { 
    $(this).attr("src","button-hover.png"); 
     }, 
    function() 
    { 
    $(this).attr("src","button.png"); 
    } 
    ); 
    } 
); 
</script> 

<body> 
<img src="button.png" alt="My button" class="button" /> 
</body> 
</html>

fonte

2015-10-28 14:13:50

non sparerà l'hover quando il mouse entra nelle aree trasparenti? – Friedpanseller

È programmabile in HTML5, senza attrezzi o costruire manualmente le coordinate <mappa> forma < zona = poli = "325,25,262, .... >

Caricare i livelli in molti nascosti tela.
monitorare la posizione relativa cursore del mouse dell'immagine di base.
controllo se stesso pixel per posizione sfalsata è bianco o non bianco su ogni tela.
ginocchiera opacità di conseguenza

sfida

prestazioni
anche sostenere touch e hover-meno dispositivi

fonte

2015-10-28 14:34:07

Questo sembra un modo interessante. Potresti postare del codice per farmi iniziare? – Friedpanseller

Javascript Passa il mouse sopra la parte visibile dell'immagine PNG

risposta

Problemi correlati