IE6 유닛 PNG 수정 + 자바 스왑 이미지가 작동하지 않습니다.

IE6 PNG 투명도 용으로 Unitpngfix를 사용하고 있습니다. 모든 것이 잘 움직입니다.IE6 유닛 PNG 수정 + 자바 스왑 이미지가 작동하지 않습니다.

이제 마우스 오버시 스왑 핑을 위해 png 메뉴 버튼을 구현해야합니다. Dreamweaver의 "동작 추가> 이미지 스왑"을 사용했습니다. 자바 스크립트 코드를 생성합니다.

이미지 교체 스크립트 :

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 수정 스크립트 :

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 코드 :

<!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>

PNG 투명도와 함께 이미지 개념을 바꿔 모든 브라우저에서 잘 작동합니다.

하지만 IE6에서 마우스를 가져 가면 버그가 나타납니다. 초기 페이지에 마우스를 올려 놓지 않으면 png 투명도가있는 메뉴 버튼이 ie6에서 작동합니다. 이미지 위에서 마우스를 가져 가면 PNG 이미지가 바뀌지 만 투명도는 사라집니다.

마우스를 올려 놓았을 때 unitpngfix 스크립트가 비활성화되어 있다고 생각합니다.

마우스 오버시 png 투명도를 활성화하려면 몇 가지 제안/도움이 필요합니다.

출처

2009-07-31 Logesh Paul

픽스가 작동하는 방식은 페이지의 모든 이미지 목록을보고 png인지 확인하고, 그렇다면 IE에서 인식되는 CSS "필터"속성을 추가하여 투명도를 얻습니다 효과. 이는 페이지로드시 수행되므로 이미지가 바뀌면 새 이미지의 필터 속성이 설정되지 않고 투명하게 보이지 않습니다.

문제를 해결하기 위해해야 할 일은 두 스크립트를 통합하는 것입니다. 호버 스크립트가 이미지를 대체 할 때 pngfix 스크립트를 호출하여 새 이미지를 투명하게 만들려면 CSS를 추가해야합니다.

unitpngfix의 소스 코드는 읽기 쉽고 개별 이미지의 투명도를 활성화하는 부분을 쉽게 찾을 수 있기를 바랍니다. 날 스크립트 주위 놀자 시도 헬프 로랑에 대한

출처

2009-07-31 13:03:54 Laurent

감사는 사람이 필요 ... –

모두를 통합하는 나를 도울 .. –

좋은 하루 ... 누군가가 도움이된다면 그 두 scripts..wondering 병합하기 어려운 것으로 보인다 스크립트 –

IE6 유닛 PNG 수정 + 자바 스왑 이미지가 작동하지 않습니다.

답변

관련 문제