Sostituire un’immagine con CSS

E’ possibile sostituire un’immagine inserita in una pagina html tramite il tag IMG e l’attributo SRC usando solamente codice CSS.
In realtà non è proprio una “sostituzione”: l’immagine originale viene nascosta e ne viene mostrata un’altra al suo posto (anche di dimensioni diverse).
Ecco come…

CSS

Supponiamo di avere il seguente codice html per pubblicare un’immagine:

<img src="vecchia.jpg">

Per farlo basta azzerare le dimensioni dell’immagine in modo da renderla invisibile:
Stiamo parlando di CSS, quindi i valori in queste istruzioni vanno usati come stile:

style="width:0;height:0;"

Poi usiamo il padding per riallargare le dimensioni del box immagine.
I valori di padding sommati – nelle due dimensioni – devono essere quelle della nuova immagine, quindi se la nuova immagine è 200×150 pixel, scriveremo:

padding: 150px 200px 0 0;

Infine usiamo l’attributo background per impostare la nuova immagine come immagine di sfondo:

background:url('nuova.jpg');

L’immagine originale risulterà nascosta, mentre la seconda immagine verrà mostrata.

Approfondimenti: stackoverflow , audenaerde

Lascia un commento

Il tuo indirizzo email non sarà pubblicato.

Ricevi un avviso se ci sono nuovi commenti. Oppure iscriviti senza commentare.

You can add images to your comment by clicking here.