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