Dare uno stile alle immagini corrotte

Spesso può capitare che qualche immagine del tuo sito non sia raggiungibile, perché è stata eliminata per sbaglio o magari perché rinominata non aggiornando il link. Quando questo accade, i browser inseriscono delle icone al posto delle immagini corrotte. Ma è possibile tramite Css o jQuery dare uno stile personalizzato e più curato nel caso in cui si verifichi l’evenienza.
- Leggi l'articolo, ti bastano solo 1 minuto, 46 secondi
Sei di fretta? Scarica il PDF e consultalo quando vuoi!
Il codice: CSS
È sufficiente inserire all’interno del tuo foglio di stile, le seguenti righe:
img:before { background-color: rgb( 230, 230, 230 ); border: 2px dotted rgb( 200, 200, 200 ); border-radius: 5px; content: " "; display: block; height: calc( 100% + 10px ); left: 0; position: absolute; top: -10px; width: 100%; } img:after { color: rgb( 100, 100, 100 ); content: "Immagine momentaneamente non disponibile"; display: block; font-size: 16px; font-style: normal; left: 0; position: absolute; text-align: center; top: 5px; width: 100%; }
È importante ricordarti di assegnare al contenitore dell’immagine la regola Css position: relative;
, per evitare che gli pseudo selettori :before e :after, posizionati in modo assoluto, si espandano in maniera incontrollata coprendo i contenuti della tua pagina.
Ecco il risultato, che ovviamente puoi personalizzare a piacimento modificando il Css proposto:
Il codice: jQuery
La correzione dei problemi dovuti alle immagini corrotte può essere effettuata anche tramite jQuery, con un semplicissimo script:
jQuery( function( $ ) { $( 'img' ).error( function() { $( this ).attr( 'src', 'img/broken.png'); } ); } );
Nel codice proposto, basta inserire il percorso relativo dell’immagine che vogliamo utilizzare in caso di immagini corrotte (nell’esempio: img/broken.png).
Nota bene, che in questo caso, è necessario avere inserito la libreria di jQuery nella nostra pagina.
Per includere la libreria di jQuery nella tua pagina, puoi utilizzare diversi modi:
Scaricare il file dal sito ufficiale di jQuery ed aggiungere alla tua pagina il seguente codice, preferibilmente prima della chiusura del tag body:
<script src="cartella_in_cui_hai_inserito_jquery/jquery-3.2.1.min.js"></script>
Oppure, sfruttando la CDN messa a disposizione da Google:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>