Differenze GIF/PNG
Come saprete il formato gif permette di salvare un’immagine dando ad ogni pixel o un colore o una trasparenza completa (100% di trasparenza) mentre con PNG abbiamo il grande vantaggio di poter graduare la percentuale di opacità.
Per vedere degli esempi pratici di utilizzo delle trasparenze PNG applicate al webdesign potrete andare su www.digital-web.com (in inglese) che contiene diversi esempi pratici e ha ispirato questo articolo.
Il problema delle gradazioni
Purtroppo questa caratteristica dei PNG non è supportata da alcune versioni di InternetExplorer ma non disperate, esiste una scappatoia.
Soluzione
Al momento vi propongo due ottime soluzioni:
- PNG Fix
- Un piccolo script js (alternativa a png fix)
1. PNG FIX
La prima soluzione è ottima, tratta da http://homepage.ntlworld.com/bobosola/pnghowto.htm
E’ sufficiente inserire il seguente codice nella pagina interessata:
<!--[if lt IE 7.]>
<script defer type="text/javascript" src="pngfix.js"></script>
<![endif]-->
Poi mettere nella stessa cartella della pagina il file pngfix.js che trovate qui: pngfix.js
Il vantaggio di questo sistema rispetto al secondo è che con questo metodo basta inserire una sola volta il javascript e questo avrà effetto su tutti i png di quella pagina mentre con il secondo metodo dovremo operare una ima immagine alla volta.
Lo svantaggio è che questo metodo un po’ invasivo provoca a volte dei problemi di visualizzazione, se sperimentare problemi di questo genere passate alla soluzione 2.
2. Un piccolo script js
49abcnews.com utilizza un breve script per risolvere il problema delle trasparenze PNG realizzabile in 3 semplici passi:
2.1. Date un attributo id all’immagine che vi interessa:
<img src='mia_immagine.png' id='mia_img' />
2.2 Inserite il richiamo allo script fra i tag <head>
<!--[if lte IE 6]>
<script src="fixPngMiaImg.js" type="text/javascript"></script>
<![endif]-->
2.3 Copiare/modificare il seguente codice nel file fixPngMiaImg.js
// This script fixes the weather image, which is an alpha transparent png image,
// so that it works properly in Internet Explorer 5, 5.5, and 6.
// This script is called by conditional comments and is only loaded for visitors using IE.
// jcroft, JAN 29 2006
// Run the fixWeatherPng function on page load.
window.attachEvent("onload", fixPng);
function fixPng() {
// First, find the image in question and get it's src value.
var img = document.getElementById("mia_img");
var src = img.src;
// Then, hide the image.
img.style.visibility = "hidden";
// Then, create a div that uses the image as a background, including MS's AlphaImageLoder filter property for trasparent PNGs.
var div = document.createElement("DIV");
div.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "', sizing='scale')";
div.style.width = "120px";
div.style.height = "100px";
// Finally, replace the image with the newly created div.
img.replaceNode(div);
}
In particolare dovrete inserire l’id della vostra immagine PNG al posto di mia_img
var img = document.getElementById("mia_img");
cambiare le dimensioni qui:
div.style.width = "120px";Ovviamente potrete aggiungere anche altre proprietà di stile.
div.style.height = "100px";