Trasparenza immagini png, browser IE6 e pagine aspx

giovedì 08 maggio 2008 - 12.28

Elenco Threads

Stanze Forum

Aggiungi ai Preferiti

Cerca nel forum

volperubbia Profilo | Senior Member

375 messaggi | Data Invio: gio 8 mag 2008 - 12:28

Ciao a tutti,
ho visto che oltre alle immagini gif, anche le png gestiscono la trasparenza, ma bisogna aggiungere qualche riga di codice alla pagina web (aspx o htm).

<HEAD runat="server">

</HEAD>

Nel file PNG.js ho messo ...

function correctPNG()
{
for(var i = 0; i < document.images.length; i++)
{
var img = document.images[i] ;
var imgName = img.src.toUpperCase() ;
if (imgName.substring(imgName.length - 3, imgName.length) == "PNG") {
var imgID = (img.id) ? "id='" + img.id + "' " : "" ;
var imgClass = (img.className) ? "class='" + img.className + "' " : "" ;
var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' " ;
var imgStyle = "display:inline-block;" + img.style.cssText ;
if (img.align == "left") imgStyle = "float:left;" + imgStyle ;
if (img.align == "right") imgStyle = "float:right;" + imgStyle ;
if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle ;
var strNewHTML = "<span " + imgID + imgClass + imgTitle +
" style=\"" + "width:" + img.width + "px; height:" +
img.height + "px;" + imgStyle + ";" +
"filter:progid:DXImageTransform.Microsoft.AlphaImageLoader" +
"(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"
img.outerHTML = strNewHTML ;
i = i - 1 ;
}
}
}
window.attachEvent("onload", correctPNG) ;

Questo codice funziona alla meraviglia nella pagina html, mentre nelle pagine aspx (ho inserito il tutto nella master.page) non ha alcun effetto, le immagini perdono la trasparenza, ... probabilmente manca ancora qualcosa.

Qualche idea?
Esistono altre strade per raggiungere il risultato?

Grazie, Davide

Brainkiller Profilo | Guru

7.999 messaggi | Data Invio: gio 8 mag 2008 - 15:18

>Ciao a tutti,
>ho visto che oltre alle immagini gif, anche le png gestiscono
>la trasparenza, ma bisogna aggiungere qualche riga di codice
>alla pagina web (aspx o htm).

C'è un metodo più semplice per rendere trasparenti le PNG su IE6 ed è il seguente:

<img src="test.png" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='test.png', sizingMethod='scale');" alt="">

Inutile dire che è una specifica proprietaria di Microsoft che va solo su IE. Gli altri Browser rappresentano le PNG con l'Alpha Channel in modo corretto. Solo da IE7 in poi c'è la piena compatibilità con l'Alpha Channel.

Il tuo metodo non l'ho mai visto.

Il mio consiglio personale è utilizzare ancora GIF dove è necessaria la trasparenza e solo quando il parco utenti IE6 sarà ridotto sotto il 1%/2% utilizzare PNG con Alpha Channel. Se invece sei in una Intranet e sai di per certo che tutti usano IE7 o Firefox o altro, beh la risposta è scontata

Ciao

David De Giacomi | Microsoft MVP
http://blogs.dotnethell.it/david/

volperubbia Profilo | Senior Member

375 messaggi | Data Invio: lun 12 mag 2008 - 09:37

Come al solito ... sei un grande! Sulle gif la penso come te, fino a ieri le usavo, solo che mi dicono che le png sono meglio definite, quanta pazienza.
Il codice che mi hai mandato sembra non aver effetto, probabilmente mi sono fumato qualcosa nella pagina, comunque mi è stato utile x semplificare il codice javascript (lo uso, almeno non devo andarlo a mettere io su ogni img delle pagine del sito).
Facendo qualche modifica sono andato anche a ciclare sugli INPUT TYPE="IMAGE" (quelli che sono renderizzati dalle image button), l'effetto visivo l'ho ottenuto, ma mi perde l'evento click e il postback. Me lo studierò ancora un po', ma non ne vale la pena di perderci troppo tempo.

Ciao, Davide

Torna su

Stanze Forum

Elenco Threads

Partecipa anche tu! Registrati!

Hai bisogno di aiuto ?
Perchè non ti registri subito?

Dopo esserti registrato potrai chiedere
aiuto sul nostro Forum oppure aiutare gli altri

Consulta le Stanze disponibili.

Registrati ora !