mappa immagine con rollover

WpStyle · 15 Giu 2009

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 · 17 Giu 2009

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

WpStyle · 17 Giu 2009

ti ringrazio borgo

ma non funzia...
ci avevo pensato anch'io ma con scarsi risultati

borgo italia · 18 Giu 2009

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&testo=testo1" onMouseOver="VISIBILE FOTO XY" onNouseOut="VISIBILE FOTO ORIGINALE" />
le foto xy di default non visible

ho ho detto un'altra ca.....?

Cerca

Cerca

mappa immagine con rollover

WpStyle

Utente Attivo

borgo italia

Super Moderatore

WpStyle

Utente Attivo

borgo italia

Super Moderatore

Discussioni simili