2009-07-31 7 views
2

Ich benutze Unitpngfix für IE6 PNG Transparenz. Alles läuft gut.IE6 Einheit PNG fix + Javascript Bild austauschen funktioniert nicht

Jetzt muss ich eine Menüschaltfläche in Png implementieren, um zu tauschen, wenn Maus über. Ich habe Dreamweaver "Add Behaviors> Swap Image" verwendet. Es generiert einen Java Script Code.

Bild austauschen Script:

function MM_preloadImages() { 
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); 
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) 
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} 
} 

function MM_swapImgRestore() { 
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; 
} 

function MM_findObj(n, d) { //v4.01 
    var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { 
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} 
    if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; 
    for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); 
    if(!x && d.getElementById) x=d.getElementById(n); return x; 
} 

function MM_swapImage() 
{ //v3.0 

    var i,j=0,x,a=MM_swapImage.arguments; 
    document.MM_sr=new Array; 
    for(i=0;i<(a.length-2);i+=3) 
    if ((x=MM_findObj(a[i]))!=null) 
    { 
     document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2]; 
    } 
} 

Unitpng fix Skript:

var clear="clear.gif"; //path to clear.gif 

document.write('<script type="text/javascript" id="ct" defer="defer" src="javascript:void(0)"><\/script>');var ct=document.getElementById("ct");ct.onreadystatechange=function(){pngfix()};pngfix=function(){var els=document.getElementsByTagName('*'),ip=/\.png/i,al="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='",i=els.length,uels=new Array(),c=0;while(i-->0){if(els[i].className.match(/unitPng/)){uels[c]=els[i];c++;}}if(uels.length==0)pfx(els);else pfx(uels);function pfx(els){i=els.length;while(i-->0){var el=els[i],es=el.style,elc=el.currentStyle,elb=elc.backgroundImage;if(el.src&&el.src.match(ip)&&!es.filter){es.height=el.height;es.width=el.width;es.filter=al+el.src+"',sizingMethod='crop')";el.src=clear;}else{if(elb.match(ip)){var path=elb.split('"'),rep=(elc.backgroundRepeat=='no-repeat')?'crop':'scale',elkids=el.getElementsByTagName('*'),j=elkids.length;es.filter=al+path[1]+"',sizingMethod='"+rep+"')";es.height=el.clientHeight+'px';es.backgroundImage='none';if(j!=0){if(elc.position!="absolute")es.position='static';while(j-->0)if(!elkids[j].style.position)elkids[j].style.position="relative";}}}}}} 

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
<script src="swapimage.js" language="javascript"></script> 
<!--[if lt IE 7]> 
<script type="text/javascript" src="unitpngfix.js"></script> 
<![endif]--> 
</head> 

<body onload="MM_preloadImages('images/ann-nav-on.png')"> 
<div id="menu"><img src="images/ann-nav-off.png" class="myswap" id="Image1" onmouseover="MM_swapImage('Image1','','images/ann-nav-on.png',1)" onmouseout="MM_swapImgRestore()" /></div> 
</body> 
</html> 

Die Swap-Bild-Konzept zusammen mit PNG-Transparenz funktioniert in allen Browsern.

Aber ich bekomme einen Fehler in IE6, wenn ich die Maus über. Ohne Maus über die erste Seite laden Menü-Taste mit PNG-Transparenz arbeitet in ie6, wenn ich die Maus über das Bild das swpping png Bild kommt, aber die Transparenz ist weg.

Ich denke, das Skript unitpngfix ist deaktiviert, wenn die Maus über.

Brauchen Sie einige Vorschläge/Hilfe, um die PNG-Transparenz bei Mouseover zu aktivieren.

Antwort

1

Die Art und Weise der Korrektur funktioniert, indem Sie durch die Liste aller Bilder auf der Seite gehen, prüfen, ob sie png sind, und wenn ja, fügen Sie eine css "Filter" -Eigenschaft (nur von IE erkannt), um die Transparenz zu erhalten bewirken. Dies geschieht beim Laden der Seite. Wenn das Bild ersetzt wird, ist die Filtereigenschaft des neuen Bildes nicht festgelegt und erscheint nicht transparent. Um das Problem zu beheben, müssen Sie beide Skripte zusammenfügen: Wenn das Hover-Skript das Bild ersetzt, muss es auch das Skript pngfix aufrufen, um die CSS hinzuzufügen, um das neue Bild transparent zu machen.

Hoffentlich ist der Quelltext von unitpngfix kurz genug, um ihn zu lesen und den Teil zu erkennen, der die Transparenz eines einzelnen Bildes aktiviert.

+0

Dank für Ihre Hilfe laurent mich um das Skript spielen lassen und versuchen, sowohl die Skripte zu integrieren –

+0

es scheint schwierig zu sein, die beiden scripts..wondering zu verschmelzen, wenn jemand .. –

+0

guten Tag hilft ... jemand braucht um mir zu helfen .. –