mappa immagine con rollover

WpStyle

Utente Attivo
25 Gen 2004
611
0
16
Pistoia
www.animalfestival.net
Ho creato con Gimp una mappa immagine divisa in 4 aree e contenente 4 link...
ora vorrei creare un effetto rollover in modo che ogni area al passaggio del mouse cambia colore e quì mi sono bloccato...

questo è il codice della map:
Codice:
<img src="immagini/mappa.gif" usemap="#map" alt="appartamenti" />
<map name="map">
<!-- #$-:Image map file created by GIMP Image Map plug-in -->
<!-- #$-:GIMP Image Map plug-in by Maurits Rijk -->
<!-- #$-:Please do not edit lines starting with "#$" -->
<!-- #$VERSION:2.3 -->
<!-- #$AUTHOR:lillo -->
<area shape="rect" coords="1,17,125,92" alt="appartamento1" href="appartamenti.php?foto=foto1&amp;testo=testo1" />
<area shape="poly" coords="130,67,169,69,167,141,95,149,85,159,44,124,47,96,129,98,130,64" alt="mappa2" href="appartamenti.php?foto=foto2&amp;testo=testo2" />
<area shape="poly" coords="171,67,169,140,218,155,305,154,303,114,211,102,216,65,167,69" alt="mappa3" href="appartamenti.php?foto=foto3&amp;testo=testo3" />
<area shape="poly" coords="239,1,304,1,305,68,285,110,215,101,220,62,237,59,237,2" alt="mappa4" href="appartamenti.php?foto=foto4&amp;testo=testo4" />
</map>

e quì per farvi capire meglio ci sono la mappa cliccabile e le immagini da utilizzare per il rollover:
http://webkode.netsons.org/mappa/mappa.html

grazie
 

borgo italia

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
4 Feb 2008
16.046
150
63
PR
www.borgo-italia.it
ciao
questa volta può essere moto grossa, anche perche non utilizzo le maparea, comunque fai questa prova, io no posso pechè non ho l'immagine in fondo alla <area shape......ho messo ...class="sopra"/>

HTML:
<style type="text/css">
<!--

area.sopra{
}
area.sopra:hover{
background-color:#0066FF;
}
-->
</style>
</head>
<body>
<img src="immagini/mappa.gif" usemap="#map" alt="appartamenti" />
<map name="map">
<!-- #$-:Image map file created by GIMP Image Map plug-in -->
<!-- #$-:GIMP Image Map plug-in by Maurits Rijk -->
<!-- #$-:Please do not edit lines starting with "#$" -->
<!-- #$VERSION:2.3 -->
<!-- #$AUTHOR:lillo -->
<area shape="rect" coords="1,17,125,92" alt="appartamento1" href="appartamenti.php?foto=foto1&amp;testo=testo1" class="sopra" />
<area shape="poly" coords="130,67,169,69,167,141,95,149,85,159,44,124,47,96,129,98,130,64" alt="mappa2" href="appartamenti.php?foto=foto2&amp;testo=testo2"  class="sopra"/>


</body>

mal che vada non funzia
 

borgo italia

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
4 Feb 2008
16.046
150
63
PR
www.borgo-italia.it
ciao
hai ragione.
pensavo ad una cosa, ma non sono molto esperto in js,
ma non è possibile gestire la visibilty di un oggetto? per cui

<area shape="rect" coords="1,17,125,92" alt="appartamento1" href="appartamenti.php?foto=foto1&amp;testo=testo1" onMouseOver="VISIBILE FOTO XY" onNouseOut="VISIBILE FOTO ORIGINALE" />
le foto xy di default non visible

ho ho detto un'altra ca.....?
 
Discussioni simili
Autore Titolo Forum Risposte Data
M Mappa immagine con elenco di link reciproci Javascript 0
M Creare mappa immagine interattiva con dati forniti da database PHP 0
C mappare un'immagine x il web con gimp(filtri/web/mappa immagine) Webdesign e Grafica 0
M Mappa immagine...vi prego è urgente, devo farlo quanto prima HTML e CSS 5
L Mappa zoomabile "immagine" Javascript 9
M mappa immagine HTML e CSS 2
S cambio di immagine in un area di una mappa dell'immagine stessa Javascript 0
F Problemi visualizzazione mappa Android studio Sviluppo app per Android 0
A Copertura: indicizzata, non inviata nella mappa del sito XML 1
O Mappa Interattiva PHP 3
A [Javascript] Marker personalizzati su mappa leaflet Javascript 0
C [PHP] Punto su mappa PHP 0
J [Wordpress] Mappa WordPress 2
M [Javascript] Visualizzazione mappa Javascript 1
A [Javascript] Problema visualizzazione posizione corrente su mappa Javascript 2
Trapano [PHP] Mappa con gli indirizzi PHP 3
ecosito [WordPress] Visualizzare una mappa con i pin dei post tramite GPS? WordPress 4
S [Javascript] Creare mappa per ogni utente Javascript 5
felino [Google MyBusiness] Maker non presente durante l'esplorazione della mappa Social Media Marketing 3
F Aggiornare marker su mappa google con una funzione ajax richiamata al cambio di una select Ajax 2
I Salve, ho un probelma con una mappa d'immagini usata come sfondo HTML e CSS 3
L Array multidimensionale mappa browsergame PHP 1
L Overlapping marker mappa google Javascript 0
asevenx [HTML] Creare mappa interattiva con Illustrator HTML e CSS 5
P modificare mappa sito Javascript 0
P modificare mappa sito Javascript 0
E realizzare una mappa personale e responsive HTML e CSS 6
G Mappa Javascript Presentati al Forum 0
M Mappa all'interno del sito con ricerca delle filiali Javascript 8
L Problema Inserimento Azioni Su mappa vettoriale Javascript 0
F zoom jquery mappa jQuery 1
J Mappa che visualizza daove sei PHP 7
F mappa jquery con effetto hover + fancybox Javascript 1
L Problemi a interagire con la mappa sul mio sito jQuery 1
felino Plugin per Mappa del sito WordPress 5
G Scaricare kml da una mappa incorporata in un sito web HTML e CSS 5
U [javascript] visualizzare marker su mappa di google Javascript 10
J Mappa con dati da db PHP 0
S [risolto] Creare una mappa Google per ogni indirizzo Javascript 14
P Popolare un Database da una mappa di google map PHP 7
P Mostrare punti interesse du una mappa di google maps Javascript 1
M Guida su come inserire la mappa di Goggle con Jumi Joomla 1
A creare una mappa del sito in frame HTML e CSS 0
unkus_nob marker dinamici in mappa google Javascript 3
M mappa generata da librerie gd modificabile tramite form PHP 51
M Mappa "interattiva" di isole per browsergame Javascript 7
emanuelevt mappa interattiva - problema jQuery 1
L Centri Media in Italia: mappa dei clienti (aggiornata) SEO e Posizionamento 9
V Mappa di Google su explorer funziona, su CHROME e FIREFOX NO! Javascript 1
A mappa del sito nascosta HTML e CSS 6

Discussioni simili