Immagine divisa in sezioni, al passaggio del mouse descrizione

di il
1 risposte

Immagine divisa in sezioni, al passaggio del mouse descrizione

Buongiorno.
Dovrei creare un immagine interattiva abbastanza semplice che poi dovrò passare ad un mio amico/"cliente" che la darà a sua volta ad un suo fornitore e verrà inserita nella sezione partner dello stesso. Questo per farvi capire che non ho accesso al sito dove verrà postata questa immagine.
All'inizio avevo pensato di farla in maniera semplice con power point, e passare giusto il collegamento uppando il file da qualche parte, ma poi ho pensato che potrebbe essere più bello e professionale creare il tutto direttamente con html e codici vari.

Questo è un esempio di quello che voglio ottenere. Un immagine che fa vedere dei pezzi, passando il mouse su ogni pezzo si illumina e compare un box con la descrizione del pezzo.
So che è abbastanza facile da realizzare, ma io sono una capra e conosco poco poco il linguaggio html e altri (credo che serve il jquery per questa immagine).
Ho visto un videotutorial su come creare una mappa interattiva tipo italia divisa in regioni, con rollover. ma non son riuscito a trovare come aggiungere un box per la descrizione. Inoltre non saprei dove dovrei inserire tutti i vari tag!

qualcuno è cosi gentile da aiutarmi?
L'intenzione è di consegnare una chiavetta con pagina html già pronta (o almeno bloco note con il codice in modo che il loro webdesigner faccia solamente copia e incolla del codice) e cartella con le immagini utilizzate

1 Risposte

  • Re: Immagine divisa in sezioni, al passaggio del mouse descrizione

    Ciao,
    puoi usare il tag MAP e i relativi tag AREA per creare delle aree sull'immagine.
    Alle aree dell'immagine puoi associare degli eventi che eseguono delle funzioni con jQuery o direttamente javascript.
    Qualche classe CSS per formattare il tutto e sei a cavallo.

    Io ti ho indicato la strada, a te il resto del lavoro
Devi accedere o registrarti per scrivere nel forum
1 risposte