Mouseover multiplo su mappa
- Questo topic ha 9 risposte, 2 partecipanti ed è stato aggiornato l'ultima volta 9 anni, 10 mesi fa da
dborghez.
- Post
dborghezSalve a tutti!
Ho appena iniziato a lavorare con jQuery e quindi ancora sono un noob 🙂Partendo da questo screen (http://i.stack.imgur.com/KyKUZ.jpg) vorrei fare un hover multiplo, ossia che al hover su un dente questo mi si colori e mi si colori pure la descrizione associata.
Sapete aiutarmi?
Grazie 🙂
jqueryitaliaCiao!
La tua richiesta è del tutto simile, cambia solo la “destinazione d’uso” 😀 , a quanto abbiamo trattato nel tutorial “Una mappa negozi interattiva“.
Dagli un’occhiata 😉
dborghezCi sto dando un occhio 🙂
Ho installato il plugin Maphighlight solo che il problema è che io vorrei colorare i denti come nello screenshot, cosa che però non è possibile con quel plugin.
Mi spiego meglio: il dente colorato è stato fatto in PS con la fusione “multiply” che non è ricreabile in CSS. La mia domanda è quindi questa, è possibile dire di rendere trasparente solo una parte (l’area selezionata della mappa) trasparente? Così potrei mettere una foto sopra l’altra e con il mouseover renderei trasparente solo un dente che farebbe vedere l’immagine sotto 🙂
E’ fattibile?
Sono stato chiaro? 🙂
jqueryitaliaConverti il file PSD in SVG (ad esempio con il programma Open Source INKSCAPE) ed usa la conversione per costruirti una mappa poligonale 😉
dborghezScusa ma non ti seguo, una volta creata la “mappa” in SVG dopo come potrei continuare? Io ho trovato http://raphaeljs.com/ , potrebbe essere d’aiuto?
Ti ringrazio 😉
dborghezHo trovato pure questo http://snapsvg.io 🙂
ps: chiedo scusa per il doppio post ma non trovavo il pulsante edit :/jqueryitaliaIl pulsante edit lo trovi sotto l’avatar, cliccando su Details 😉
Usando SVG puoi creare delle aree da utilizzare come mappe poligonali.
dborghezSi ok quello l’avevo capito, ma per usare un filve svg (che non ho mai usato) ho visto che viene caricato nel tag object oppure embed. Solo che poi non riesco a capire come fare a usarlo, cioè in se lo vede come una sola immagine e non vede tutti i tracciati da cui è composto. Come faccio a dirgli “con un mouseover su questo dente allora fammi questo” ?
dborghezNEW:
ho capito come funziona l’svg e di conseguenza come funzionano i tracciati. Da Illustrator se chiamo un tracciato con un nome questo verrà riportato pari pari come ID del tracciato.
Ora quindi il secondo problema, come faccio a colorare il tracciato al passaggio del mouse? Ho provato con un ” #prova:hover path{fill:yellow !important;} ” ma non funziona :/
dborghezEsportando l’ SVG e caricandolo con il tag img non me lo lascia modificarecon il CSS,
Se invece incollo le coordinate allora riesco a modificarlo. Sai dirmi perché?
PS: non vedo il tasto modifica! sono stato costretto a fare due post!
- Devi essere connesso per rispondere a questo topic.
