Modifica immagini con CSS

[Raw Materials]

Ciao ragazzi! Vi volevo chiedere se era possibile modificare la larghezza (width) di un'immagine, al passaggio del mouse, utilizzando i CSS... Io ho provato più o neno così:

A.immagini:link, A.immagini:visited, A.immagini:active {
	width: 160px;
}

A.immagini:hover {
	width: 180px;
}

L'ho inserito nel tag <A> dell'immagine linkata ma sembra che modifichi solo la larghezza dello spazio attorno all'immagine... voi che ne dite? Grazie e ciao!

[Jerry Masslo]

fa quello che deve fare, anzi che non dovrebbe nemmeno fare a meno di non dare pure un display:block,

hai fatto una pseudo-classe che cambia le dimensioni dei link, l'immagine non centra niente, prende le misure date nello html o quelle effettive se lì non ci sono.

tu vuoi un effetto rollover coi css senza quindi javascript?

se è così puoi usare gli sfondi.

a {background:url(primoSfondo.png)
padding-left:200px}

a:hover {background:url(secondoSfondo.png);
padding-left:300px}

cioè usi il padding per dare spazio e un'immagine di quella grandezza e poi lo cambi per averlo più grande e fare posto a uno sfondo più grande.

nel link non scrivi niente ma aggiungi un non breaking space perchè ho notato che opera non visualizza niente altrimenti.
come pensi di risolvere il fatto che al cambio di dimensioni si sposteranno gli elementi vicini? cioè dovresti usare pure il margin in modo inverso al padding.

[Raw Materials]

No no, io voglio usare sempre la stessa immagine! Sto già utilizzando due immagini con un javascript che mi fa l'onmouseover ma per alleggerire la pagina volevo creare un foglio di stile che, al passaggio del mouse, mi modificasse la larghezza dell'immagine... come quando hai una immagine larga 200px e in HTML scrivi <img ... width="300">; la larghezza dell'immagine si adatta al codice e si allarga a 300px... ma sempre la stessa immagine, capito?

[Jerry Masslo]

onmouseover="this.style.width='300px'" onmouseout="this.style.width='21px'"

questo nell'immagine, immagino che ti serva pure l'onmouseout, considera che le immagini a dimensioni diverse dall'orignali non sempre vengono bene.

senza nessun javascript si potrebbero mettere le dimensioni nel css ma poi serve un

img:hover

o equivalente che però non viene letto da ie, cioè lo legge solo su link mentre gli altri browser non hanno di queste pretese.

[Raw Materials]

Ma la riga

onmouseover="this.style.width='300px'" onmouseout="this.style.width='21px'"

Funziona correttamente anche con gli altri browser?

[Jerry Masslo]

Originariamente inviato da Raw Materials
Ma la riga

onmouseover="this.style.width='300px'" onmouseout="this.style.width='21px'"

Funziona correttamente anche con gli altri browser?

è piuttosto standard, provato sugli ie mozilla e opera

[Raw Materials]

OK, grazie mille per l'aiuto, ciao!!!

[Raw Materials]

C'è un problema: io vorrei che oltre alla larghezza aumentasse anche l'altezza dell'immagine in proporzione all'aumento della base... altrimenti mi viene un "effetto stiratura" dell'immagine. E' possibile fare questa modifica allo script?

[Jerry Masslo]

onmouseover="this.style.width='300px';this.style.h eight='100px'" onmouseout="this.style.width='21px';this.style.hei ght='10px'"

ma è più semplice che tu tolga le misure dall'immagine, se non ne dai l'immagine verrà mostrata alle sue dimensioni reali e cambiando il width l'height si proporzionerà automaticamente.