Newsgroup: it.comp.lang.javascript
Titolo: pngfix.js e rollover in IE

Ho un menu orizzontale il cui rollover viene gestito dal javascript 
generato da dreamweaver. Le immagini sono png e la loro trasparenza in 
IE viene gestita dal classico pngfix.js.
Il problema č che in IE (una volta applicato il pngfix) il rollover non 
funziona piů. Ovviamente se tolgo il pngfix il rollover funziona ma le 
png non sono piů trasparenti.
Qualcuno sa come fare per risolvere?
Grazie.

Bribro wrote:
in altre parole, nel codice seguente cos'è che interferisce con 
onmouseover (solo su IE)?
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);

 onmouseover (solo su IE)?
[snip]
Interferisce il fatto che riscrive il codice HTML, e quindi "ciao ciao" al
rollover.
-- 
~ "Nell'anno 1969 è bastata la potenza di calcolo di due Commodore 64 per
mandare con successo una navicella sulla Luna. Nell'anno 2003 è
necessario un Pentium 4 a 2000 Mhz per far funzionare Windows XP.
Qualcosa deve essere andato storto."

 rollover.
Ok, ma allora perché su firefox funziona?
E a parte questo, non c'è un modo per farglielo riscrivere "giusto"?


Guardando meglio penso che il problema stia nell'aggiungere la gestione 
degli eventi onmouseover e onmouseout a questa istruzione:
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>"
Sbaglio?

 E a parte questo, non c'è un modo per farglielo riscrivere "giusto"?
Quel codice è fatto veramente male. Anche perché oggi puoi aver problemi
con gli eventi onmouseover/onmouseout, domani sarà l'onclick.. e così via.
Ma anche "correggendo" (o meglio, riscrivendo) tale codice, avrai
ugualmente dei problemi successivamente.
Il problema poi sta anche nel rollover: nel rollover tu imposti un src
diverso per *l'immagine*, ma nel "fix" per IE, tale "src" non esplica più
quella funzione, l'immagine sorgente è definita direttamente nel filtro.
Quindi un rollover "canonico" non ti funzionerebbe più. Dovresti, anche nel
rollover, fare una distinzione.
Anche se di solito tento di evitare i behavior di IE per una serie di
motivi (tra i quali le performance), ti suggerisco di dare un'occhiata a
questo:
http://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html


 
http://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html
Innanzitutto grazie per la segnalazione.
Sto provando a usarlo e qualcosa succede: al posto delle immagini ci 
sono come dei piccoli segnaposto sul cui sfondo si intravede la png 
originale.
Il file htc, blank.gif e il css che contiene la chiamata al behavior 
sono tutti e tre nella stessa cartella (/inc).
Nel file htc ho lasciato blankSrc = "blank.gif" e nel css ho aggiunto 
img{behavior: url("./inc/pngbehavior.htc");}.
Dove sbaglio?

 Dove sbaglio?
Lo ignoro, non ho mai utilizzato tale script personalmente. Se hai modo di
pubblicare da qualche parte la pagina incriminata, vedo di darci
un'occhiata.
-- 
~ "Nell'anno 1969 č bastata la potenza di calcolo di due Commodore 64 per
mandare con successo una navicella sulla Luna. Nell'anno 2003 č


 un'occhiata.
http://utenti.lycos.it/lafabbricatest/green_tea/
Grazie e scusa per l'ot (visto che a quanto pare non riguarda più 
javascript)

 javascript)
L'immagine "blank.gif" te la cerca in questo percorso:
http://utenti.lycos.it/lafabbricatest/green_tea/blank.gif
Ergo, o sposti l'immagine in questione da "inc" a li (se ben ricordo stava
in tale subdir), oppure modifichi il behavior in modo che vada a pescartela
nella subdir giusta.
-- 
~ "Nell'anno 1969 è bastata la potenza di calcolo di due Commodore 64 per
mandare con successo una navicella sulla Luna. Nell'anno 2003 è


 nella subdir giusta.
Adesso non ci sono nemmeno più i segnaposto, è scomparso tutto.
Pazienza, userò le gif. Però mi sarebbe piaciuto trovare il bandolo di 
questa matassa.
Grazie.

 Adesso non ci sono nemmeno più i segnaposto, è scomparso tutto.
Perché il percorso ora è corretto; ma ti sei dimenticato di scrivere nel
codice HTML gli attributi width e height delle immagini.
Aggiungili con i valori corretti, e vedrai che ti funzionerà tutto.


 
Infatti adesso funziona.
Grazie 1000 di nuovo, non sai che problema m'hai risolto.