Home
Home
Tutorials
   PHP
   Java
   Tutti...
Manuali
SmartImage
Marketing
Downloads
Contatti
Affiliati

  Da vedere
Hosting
Statistiche per siti
Corsi per webmaster
Hardware
Processori


  OnFocus
Google non legge i meta tags!

Creare date casuali con MySql

Inviare email con PHP: parte 2

  Siti Amici
Miki News
Giochi gratis
Areagratis
Baratto Online
AI Machines
Guide e Manuali Gratis
Mylinks
Ricerca Internet
InfAdu
Fiumicino Web Agency
Sniper Wolf 's blog
Milan Calcio
Add to Technorati Favorites

Tutti i siti amici
Diventa Affiliato

 


Autore: Alessandro Coscia
Categoria: html
Livello: normale Livello normale

Semitrasparenza con PNG e compatibilità con IE

Risolvere il problema di compatibilità fra PNG e IE

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:
  1. PNG Fix
  2. 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";
div.style.height "100px";
Ovviamente potrete aggiungere anche altre proprietà di stile.


Un'icona per il sito: creare la favicon Precedente Indice Successivo Array in JSON: come abilitarne l'uso
Un'icona per il sito: creare la favicon Array in JSON: come abilitarne l'uso
 
 VertoWeb - Aggregatore RSS - Etichettatrici - Arte Modellistica - Bar Every Day