I forum Ricerca FAQ
Fai una domanda
Ultimo messaggio
maurocass71
maurocass71
il 12 aprile 2008 alle 20:48
27 messaggi dal 07 ottobre 2005
Ciao a tutti, vorrei fare una cosa carina per il sito di un mio amico.
Passando con il mouse sopra ad un'immagine, questa cambia e ritorna originale all'uyscita del mouse.
Premesso che in rete ho trovato tanti esempi, ma che (non capisco il motivo) non riesco a far funzionare.
Per lo + sono javascript.
Ecco cosa ho trovato:

----------------------------
<script language="JavaScript">
<!--
var Img1On = new Image();
Img1On.src = "immagine1_on.jpg";
var Img1Off = new Image();
Img1Off.src = "immagine1_off.jpg";

var Img2On = new Image();
Img2On.src = "immagine2_on.jpg";
var Img2Off = new Image();
Img2Off.src = "immagine2_off.jpg";

var Img3On = new Image();
Img3On.src = "immagine3_on.jpg";
var Img3Off = new Image();
Img3Off.src = "immagine3_off.jpg";

var Img4On = new Image();
Img4On.src = "immagine4_on.jpg";
var Img4Off = new Image();
Img4Off.src = "immagine4_off.jpg";

function MOver(picimage)
{
Picture_Over = eval(picimage +"On.src")
document[picimage].src = Picture_Over
}
function MOut(picimage)
{
Picture_Out = eval(picimage +"Off.src")
document[picimage].src = Picture_Out
}
-->
</script>
--------------------------------

Ora aggiungo nella riga interessata:

<a href="#" onMouseOver="MOver('Img1')" onMouseOut = "MOut('Img1')">
<img src="immagine1_off.jpg" border="0" name="Img1_off">
</a>


Questo è uno dei tanti esempi ke ho trovato, ma il succo non cambia anche negli altri....

Non sò che dire...non funziona....

Posso farlo tramite ASP o devo gestire la cosa solo in javascript?

Suggerimenti su altre soluzioni?
Modificato da maurocass71 il 12 aprile 2008 21.31 -
RispondiQuoting
hggiangio
hggiangio
il 14 aprile 2008 alle 08:51
3 messaggi dal 29 febbraio 2008
Ciao, io ti consiglio di usare uno stile css, che ti evita di inserire contenuto attivo nelle tue pagine.. Ecco un esempio:
<style type="text/css">
<!--
p {
background-color: #00CC33;
}
p:hover {
background-color: #CCFF99;
}
-->
</style>

L'esempio è stato fatto sull'elemento <p> e il passaggio del mouse provoca la modifica del colore di fondo, ma si può anche inpostare che a modificarsi sia l'immagine di sfondo.
Questo stile css puoi metterlo o interno alla pagina (e quindi immettere il codice nell'Head) oppure metterlo in un css esterno (e linkarlo sempre nell'head)

Spero di esserti stato utile..
Ciao..
RispondiQuoting
maurocass71
maurocass71
il 15 aprile 2008 alle 18:49
27 messaggi dal 07 ottobre 2005
Grazie x la risposta.
Vedi però ho un problema....

Io vorrei che in un' immagine, che è anche un link, al passaggio del mouse cambi con un'altra immagine.

Così facendo come dici tu, ottengo che qualunque immagine nella pagina venga sostituita con 1 immagine specifica, ma io così non voglio poichè ho 4 immagini in quella pagina e devono essere sostituite da 4 immagini diverse tra loro.
RispondiQuoting
hggiangio
hggiangio
il 16 aprile 2008 alle 08:52
3 messaggi dal 29 febbraio 2008
Ciao, per risolvere il tuo problema ti basta dare un id diverso ai 4 link della tua pagina e creare lo stile css sulla base di quei id..

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#link1 {
background-image: url(im1.jpg);
height: 100px;
width: 123px;
display: block;
}
#link2 {
background-image: url(im3.jpg);
display: block;
height: 131px;
width: 131px;
}
#link2:hover {
background-image: url(im4.jpg);
}
#link1:hover {
background-image: url(im2.jpg);
}
-->
</style>
</head>

<body>
<a href="#nogo" id="link1"> link1 </a>
<a href="#nogo" id="link2"> link2 </a>
</body>
</html>

l'esempio che ho preparato si basa solo su due link, ma puoi facilmente modificarlo x 4...
Come puoi notare nel tag <a> ho definito per ciascun link un id diverso sul quale poi definisco lo stile nel css (che in questo caso è interno).

Ciao, fammi sapere...
RispondiQuoting
maurocass71
maurocass71
il 17 aprile 2008 alle 12:50
27 messaggi dal 07 ottobre 2005
dunque...vediamo se ho capito bene....

- Fisso l'ID tramite NAME="nomeID"

- #link1 { QUESTO E' CIO' CHE IMPOSTO ALL'ID link1.

background-image: url(im1.jpg); QUESTA E' L'IMMAGINE CHE SI SOVRAPPONE ?

Perdonami ma non sono un grosso intenditore di CSS .... :-)
RispondiQuoting
maurocass71
maurocass71
il 17 aprile 2008 alle 22:44
27 messaggi dal 07 ottobre 2005
Sembra che non vada....

<style type="text/css">
<!--
#link1 {
background-image: url(img/cam-01-very-small.jpg);
height: 88px;
width: 117px;
display: block;
}
</style>

<div>
<a href="#nogo" id="link1" target="_self"><img src="img/cam-01-very-small-viola.jpg" alt="" /></a>
</div>

vedo solo l'immagine viola.....
RispondiQuoting
maurocass71
maurocass71
il 17 aprile 2008 alle 22:53
27 messaggi dal 07 ottobre 2005
Errore mio....non ho visto la 2nda parte del CSS....

#link1:hover {
background-image: url(img/cam-01-very-small.jpg);
}


Quindi riepoilogando credo di aver capito il funzionamento.

#link1 blablabla serve a settare l'immagine di sfondo, mentre
#lin1 a:hover blablabla serve x il rollover.

Grazie 1000 per l'aiuto ;-)
RispondiQuoting

Torna al forum | Feed RSS

ASPItalia.com non è responsabile per il contenuto dei messaggi presenti su questo servizio, non avendo nessun controllo sui messaggi postati nei propri forum, che rappresentano l'espressione del pensiero degli autori.