cambiare immagine senza javascript

[pietro09]

Data una immagine, se ci passo sopra col mouse, è possibile cambiarla solo con lo stile, senza javascritp? (IE6, IE7, Firefox2)

[gengix]

Se intendi un'immagine all'interno di un link, si può fare.

[pietro09]

Originariamente inviato da gengix
Se intendi un'immagine all'interno di un link, si può fare.

All'interno di un link, ma magari anche fuori da un link

ps.

Ah! dimenticavo come?

[gengix]

Fuori da un link non si può fare, semplicemente perchè le uniche proprietà che danno un po' di dinamicità nei css sono le pseudo-classi dinamiche, di cui fanno parte gli stati dei link.

In effetti non mi sono spiegato molto bene prima. In realtà per cambiare un immagine con i css, quest'ultima deve far parte del link, in poche parole deve essere lo sfondo del link che viene dichiarato con la proprietà background. Il tag img in realtà non è presente nella struttura del documento.

es se hai un'immagine di px 102 * 22

struttura

css

a
{
	display:block;
	width:102px;
	height:22px;
}
a:link, a:visited
{
	background: url(immagine1) center top no-repeat;
}
a:hover
{
	background: url(immagine2) center top no-repeat;
}

Le proprietà dello sfondo sono spiegate qui:

http://css.html.it/guide/lezione/30/...-dello-sfondo/

[salasir]

Giusto per completezza.
La pseudoclasse :hover è utilizzabile su tutti i tag, solo che IE, fino alla versione 6, lo gestisce solo sui tag <a>.

[pietro09]

mi studio le risposte, e nel frattempo vi ringrazio. Ciao

[kerik]

io anche ho lo stesso problema

ho provato come e spieto sopra e in effetti funziona

l' unico problema e che poi l' immaggine la mette in tutti i link

[kerik]

io vorrei sapere come faccio a cambiare l' immaggine ad ogni link diverso

[gengix]

L'esempio riportato sopra prende in considerazione l'elemento a in generale.

io vorrei sapere come faccio a cambiare l' immaggine ad ogni link diverso

Puoi farlo con la discendenza.
Esempio:

html

<div id="box">
    Link
</div>

css

#box a {
   .......;
}
#box a:link, #box a:visited {
......;
}
#box a:hover{
......;
}
#box a:active{
......;
}

Oppure puoi dare un id o una classe direttamente al link
Esempio:

Link

#link{
....;
}
#link:link, #link:visited{
.....;
}
#link:hover{
.....;
}
#link:active{
......;
}