Databases
StackOverflow2013
Postsdbo
POIE6 Unit PNG fix + Javascript Swap Image not working
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POIE6 Unit PNG fix + Javascript Swap Image not working
    text
    copied!<p>I am using Unitpngfix for IE6 PNG Transparency. Everything moves fine.</p> <p>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.</p> <p><strong>Swap Image Script:</strong></p> <pre><code>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&lt;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&amp;&amp;i&lt;a.length&amp;&amp;(x=a[i])&amp;&amp;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("?"))&gt;0&amp;&amp;parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&amp;&amp;d.all) x=d.all[n]; for (i=0;!x&amp;&amp;i&lt;d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&amp;&amp;d.layers&amp;&amp;i&lt;d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x &amp;&amp; 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&lt;(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]; } } </code></pre> <p><strong>Unitpng fix script:</strong></p> <pre><code>var clear="clear.gif"; //path to clear.gif document.write('&lt;script type="text/javascript" id="ct" defer="defer" src="javascript:void(0)"&gt;&lt;\/script&gt;');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--&gt;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--&gt;0){var el=els[i],es=el.style,elc=el.currentStyle,elb=elc.backgroundImage;if(el.src&amp;&amp;el.src.match(ip)&amp;&amp;!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--&gt;0)if(!elkids[j].style.position)elkids[j].style.position="relative";}}}}}} </code></pre> <p><strong>HTML Code:</strong></p> <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; &lt;title&gt;Untitled Document&lt;/title&gt; &lt;script src="swapimage.js" language="javascript"&gt;&lt;/script&gt; &lt;!--[if lt IE 7]&gt; &lt;script type="text/javascript" src="unitpngfix.js"&gt;&lt;/script&gt; &lt;![endif]--&gt; &lt;/head&gt; &lt;body onload="MM_preloadImages('images/ann-nav-on.png')"&gt; &lt;div id="menu"&gt;&lt;img src="images/ann-nav-off.png" class="myswap" id="Image1" onmouseover="MM_swapImage('Image1','','images/ann-nav-on.png',1)" onmouseout="MM_swapImgRestore()" /&gt;&lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>The swap image concept along with png transparency is working fine in all browsers. </p> <p>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.</p> <p>I think the unitpngfix script is deactivated when mouse over. </p> <p>Need some suggestions/help to activate the png transparency on mouse over.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload