Discuti il tutorial sul forum !

Immagine PNG con effetto alpha

Internet Explorer does not support 24-bit PNG images with alpha transparency, as has been well documented around the Web (here are just a few: 1, 2, 3, 4). The crux of the "solution" to this problem is to use an Internet Explorer filter called AlphaImageLoader. AlphaImageLoader can be applied to a div element to display a PNG image properly using DirectX.

The difficult part of the problem is that AlphaImageLoader applies to div elements, whereas we need to use standard img elements on other browsers. Among other things, img elements size automatically when the image downloads, but div elements have to be sized explicitly with CSS.

Many of the solutions above are geared towards fixing static HTML. With Ajax apps, you generally construct HTML elements programmatically. This recipe is optimized for that approach:

function createPNGImage(src, width, height) {
    if (navigator.userAgent.indexOf("MSIE") != -1) {
        var element = document.createElement("div");
        element.style.filter = "progid:DXImageTransform.Microsoft." +
                               "AlphaImageLoader(src=’" + src + "’)";
    } else {
        var element = document.createElement("img");
        element.src = src;
    }
    element.style.width = width + "px";
    element.style.height = height + "px";
    return element;
}

The createPNGImage function returns a DOM element - a different node type depending on the user’s browser. Example usage:

var element = createPNGImage("example.png", 312, 33);
document.getElementById("output").appendChild(element);

Fonte: http://ajaxcookbook.org/png-alpha-transparency/

Share and Enjoy: These icons link to social bookmarking sites where readers can share and discover new web pages.
  • blinkbits
  • BlinkList
  • blogmarks
  • co.mments
  • del.icio.us
  • De.lirio.us
  • digg
  • Fark
  • feedmelinks
  • Furl
  • LinkaGoGo
  • Ma.gnolia
  • NewsVine
  • Reddit
  • scuttle
  • Smarking
  • Spurl
  • YahooMyWeb
  • DZone
  • Internetmedia
  • Snap2r
  • Technorati


December 17, 2006 | Scritto in javascript, tutorials  Letto:1023 volte

Correlati


Commenti

Scrivi un commento





Commenti recenti:


Ultimi dal forum

Selezionando contrassegno si aggiungono spese al totale
Ho inserito postepay come pagamento
Inserire metakeywords
Problemi di installazione
Scaricare correttore ortografico italiano
Vari problemi
Installazione su server remoto
Installazione
Problema aggiornamento quantità prodotti carrello
Info
Bug utente + suggerimento formattazione
Problema cancellazione dalla mailing list
Problemi login
Problemi di visualizzazione nella home page
Fireworks appiattisce livelli quando salvo in png