Come sostituire una foto in una pagina web senza utilizzare funzioni Javascript
Quando si tratta di eseguire questo tipo di operazioni generalmente si punta il dito verso Javascript in quanto l’operazione è praticamente immediata, ma ho la brutta abitudine di cercare sempre delle alternative.
È la volta della sostituzione di un’immagine in un tag <img />. Con Javacript basterebbe un semplice field.src = {nuovo indirizzo}, ma con CSS possiamo ottenere lo stesso risultato.
Affinché la procedura funzioni correttamente è necessario che le due immagini abbiano le stesse dimensioni.
Immaginiamo di avere un tag <img /> che andremo ad identificare con image-replace, così da poterlo gestire direttamente da CSS.
<img class="image-replace" src="https://immagine1.png" />Se utilizziamo questo codice javascript, la nostra immagine principale verrà spostata tutta a destra, permettendoci di vedere la nuova immagine che andremo ad impostare come background.
.image-replace {
padding-left: 800px;
box-sizing: border-box;
background: url(https://immagine2.png) no-repeat;
width: 800px;
height: 600px;
}È importante che gli attributi padding-left e width contengano la larghezza delle immagini, così da assicurarci che la nostra https://immagine1.png venga spostata completamente dal riquadro.