views:

2216

answers:

2

Hi Everyone,

I am using Unitpngfix for IE6 PNG Transparency. Everything moves fine.

Now i need to implement a menu button in png to swap when mouse over. I used dreamweaver "Add Behaviors > Swap Image". It generates a java script code.

Swap Image 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 script:

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"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<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>

The swap image concept along with png transparency is working fine in all browsers.

But i am getting a bug in IE6 when i mouse over. Without mouse over on initial page load menu button with png transparency is working in ie6, when i take the mouse over the image the swapping png image comes but the transparency is gone.

I think the unitpngfix script is deactivated when mouse over.

Need some suggestions/help to activate the png transparency on mouse over.

looking for some reply,

Logesh Paul

+1  A: 

The way the fix works is by going through the list of all the images on the page, checking if they are png, and if so, adding a css "filter" property (recognized only by IE) to get the transparency effect. This is done on page load, so when the image is replaced, the new image does not have its filter property set and does not appear transparent.

What you need to do to fix the problem is integrate both scripts together: when the hover script replaces the image, it must also call the pngfix script to add the css to make the new image transparent.

Hopefully unitpngfix's source code is short enough that you can read it and easily spot the part that activates the transparency on an individual image.

Laurent
Thank for your help laurentLet me play around the script and try to integrate both the scripts
Logesh Paul
it seems to be hard to merge those two scripts..wondering if someone helps..
Logesh Paul
good day...need someone to help me out..
Logesh Paul
A: 

Did you ever get a fix for this?

Mark
No Mark....Please help me..If you find a solution and post here. It may be useful for many users..... Looking for your response
Logesh Paul