effetto link

**nano2000** · 13-12-2004, 12:53

ciao a tutti, avrei un problemino da risolvere:
in un pagina dovrei creare un "semplice" effetto link su un testo normale, cioè far diventare verde il testo originariamente rosso quando passo sopra col mouse e farlo tornare rosso quando mi sposto.
Ho trovato e utilizzato questo codice:

---- nella head ----
function cambia_colore() {
event.srcElement.id=="testo";
var curElement = event.srcElement;
if ("red" == curElement.style.color)
{
curElement.style.color = "green";
}
else
{
curElement.style.color = "red";
}
}

---- nel codice della pagina ----
<span id="testo" style="color:red" onMouseOver="cambia_colore();">testo da colorare</span>

Però l'effetto non è proprio quello desiderato perchè così diventa verde quando ci passo sopra e poi però ci rimane, per farlo tornare rosso ho richiamato la stessa funzione anche sull' onMouseOut ma non funziona...

**pierofix** · 13-12-2004, 12:59

E usare i CSS no?

codice:

a {
   color: red;
}
a:hover {
   color: green;
}

**nano2000** · 13-12-2004, 15:29

ho provato però quel testo non è un link e con i css se non ci metto l'href non funziona il cambio di colore...

**lorenzo12375** · 14-12-2004, 02:09

ciao,
href="#", se poi ti dà fastidio la manina cursor:default;
oppure anche js.

ecco entrambe le soluzioni:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title></title>
<style type="text/css">
#pippo{color:red ;
}
a{color:red;
}
a:hover{cursor:default;
color:green;
}
</style>
</head>
<body>
<div id="pippo" onMouseOver="this.style.color='green';"onMouseOut= "this.style.color='red';">lollo</div>
pappa
</body>
</html>

**pierofix** · 14-12-2004, 10:02

Originariamente inviato da nano2000
ho provato però quel testo non è un link e con i css se non ci metto l'href non funziona il cambio di colore...

Ah, scusa: non mi ero accorto fosse uno span

.
Allora, browser diversi da IE (

) interpretano l'hover anche per elementi che non sono a.

Se proprio vuoi farlo in javascript, allora devi impostare due funzioni e associarle una all'attributo onmouseover e una a onmouseout: la prima colora di rosso, la seconda colora del colore d'origine.

**nano2004** · 14-12-2004, 11:35

funziona perfettamente, grazie mille per l'aiuto!

**pierofix** · 14-12-2004, 11:37

Tuttavia ti sconsiglio di usare certe soluzioni. Prima è meglio chiedersi se ci servono davvero.

**smal** · 14-12-2004, 11:47

Potresti usare anche questa soluzione:
<span onmouseover="this.style.color:'#00FF00';cursor:han d;" onmouseout="this.style.color:'#FF0000';">Testo di prova</span>

**pierofix** · 14-12-2004, 11:52

Sì, potrebbe, ma ora, oggettivamente, non è una bruta sporcatura di codice?

**smal** · 14-12-2004, 11:56

Originariamente inviato da pierofix
Sì, potrebbe, ma ora, oggettivamente, non è una bruta sporcatura di codice?

Hai ben detto: solo una ed in quanto tale penso che non sia un problema.

Discussione: effetto link

Strumenti discussione

Ricerca discussione

Visualizza

effetto link

Permessi di invio