img a:hover

**Dubal** · 15-07-2009, 22:20

Ciao,
è possibile tramite foglio di stile, dire ad un immagine di "cambiare" al passare del mouse?

Fino ad oggi per realizzare il classico pulsante che si accende e spegne al passare del mosue ho sempre utilizzato un DIV con del testo. Con pochi passaggi il DIV mostrava l'immagine del bottone spento, passandoci sopra mostrava l'immagine del bottone acceso.

E' possibile applicare questo semplice effetto ad un immagine tramite CSS?
Senza usare la funzione d Dreamweaver "swap:image"

Grazie

**loop** · 15-07-2009, 23:28

Prova così

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento senza titolo</title>
<style type="text/css">
<!--
a {
	background: url(img1.jpg);
}
#l1 {
	height: 40px;
	width: 120px;
	display: block;
}
#l1:hover {
	background: url(img2.jpg);
	height: 40px;
	width: 120px;
	display: block;
}
-->
</style>
</head>

<body>

</body>
</html>

**Dubal** · 16-07-2009, 00:04

Grazie!

Domani mattina c provo e t faccio sapere!

**Dubal** · 16-07-2009, 09:28

Che stupido! Ieri non avevo visto con attenzione il codice!
Anche tu nel BODY utilizzi:

Anche io ho sempre utilizzato questo metodo per l'effetto rollover, ma se volessi usare direttamente l'immagine? E' possibile?

Tipo:

[img]immagini/immagine.jpg[/img]

Poi nel CSS tramite la class "roll" dovrei far cambiare l'immagine al passaggio del mouse ...

Questo è possibile?

**LùcazStrict** · 16-07-2009, 09:51

ad occhio direi di no, perchè non si tratta dello stile ma di un attributo del tag img... :master:

però non sono sicuro

**fcaldera** · 16-07-2009, 10:22

via css non puoi cambiare l'attributo dei tag in pagina. Per quello puoi usare javascript

**Dubal** · 16-07-2009, 10:59

Immaginavo...
Ci avevo provato, ma ragionandoci mi sembrava impossibile cambiare un IMG con un CSS.

Però chiedere non costa nulla

Grazie!

**DydBoy** · 17-07-2009, 08:56

Documentati sui CSS Sprite.

Creando una immagine unica con entrambe le due immagini di cui disponi puoi, tramite CSS, cambiare il background-position sull'hover in modo da simulare il "cambio" immagine.

E' una tecnica ampiamente utilizzata.

Discussione: img a:hover

Strumenti discussione

Ricerca discussione

Visualizza

img a:hover

Permessi di invio