Исправление PNG для блока IE6 + не работает своп Javascript - PullRequest
Новая
       35

Исправление PNG для блока IE6 + не работает своп Javascript

2 голосов
/ 31 июля 2009

Я использую Unitpngfix для прозрачности IE6 PNG. Все движется нормально.

Теперь мне нужно реализовать кнопку меню в png, чтобы поменять местами при наведении мыши. Я использовал Dreamweaver «Добавить поведение> Поменять изображение». Он генерирует код сценария Java.

Сценарий обмена изображениями: 

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 при наведении мыши.

1 Ответ

1 голос
/ 31 июля 2009

Способ устранения проблемы заключается в том, чтобы просмотреть список всех изображений на странице, проверить, являются ли они png, и, если это так, добавить свойство css "filter" (распознаваемое только IE), чтобы получить эффект прозрачности. , Это делается при загрузке страницы, поэтому при замене изображения новое изображение не имеет установленного свойства фильтра и не выглядит прозрачным.

Что нужно сделать, чтобы решить проблему, так это объединить оба сценария вместе: когда сценарий наведения заменяет изображение, он также должен вызвать сценарий pngfix, чтобы добавить css, чтобы сделать новое изображение прозрачным.

Надеюсь, исходный код unitpngfix достаточно короткий, чтобы вы могли его прочитать и легко определить часть, которая активирует прозрачность на отдельном изображении.

...