Internet Explorer 6 PNG Transparency

**scorch94** · 12-29-2007 09:16 AM

Hello, there!
I've been designing my site for some time now.
And I have (like always) encountered a problem :fouet:

I have some images that swap on mouse over. Everything is smooth sailing in Firefox. But... not doin' well in Internet Explorer 6.
As you probably know, it doesn't support PNG transparency.

I found a script that fixes it with non-swapping PNG images. But since my PNGs swap, that script doesn't work.

Does anyone know solution for my problem?

Just for every case, here's the code of my page:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>UrosP Portfolio</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="css.css">
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
  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_preloadImages() { //v3.0
  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_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];}
}
//-->
</script>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
<script language="JavaScript" type="text/javascript">
<!--
// Functions...
var iTD=document.getElementsByTagName("B");
function deviantx(){
iTD[0].innerHTML="Check my deviantART!";
}
function deviantxr(){
iTD[0].innerHTML = "";
}
function blogx(){
iTD[0].innerHTML="Check my blog!";
}
function blogxr(){
iTD[0].innerHTML="";
}
function softx(){
iTD[0].innerHTML="Check my software!";
}
function softxr(){
iTD[0].innerHTML="";
}
function igloox(){
iTD[0].innerHTML="Check out my iGloo on CrystalXP.net!";
}
function iglooxr(){
iTD[0].innerHTML="";
}
function contactx(){
iTD[0].innerHTML="Contact me!";
}
function contactxr(){
iTD[0].innerHTML="";
}
//-->
</script>
</head>

<body bgcolor="FFFFFF" background="images/background.png" text="7B7D7E" link="7B7D7E" vlink="7B7D7E" alink="7B7D7E" onLoad="MM_preloadImages('images/da-ref.png','images/blog-ref.png','images/software-ref.png','images/igloo-ref.png','images/contact-ref.png')">
<div align="center">
  <p><img src="images/zaglavljence2.png" alt="UrosP" name="urosp" width="115" height="50" id="urosp"> 
  </p>
  <p>
  <table width="450" border="0" height="123">
    <tr> 
      <td align="center"><font face="Verdana, Arial, Helvetica, sans-serif">
        <h2><font color="#7B7D7E"><b></b></font></h2>
        </font></td>
    </tr></table></p>
  <p><a href="http://urosp.deviantart.com" onMouseOut="MM_swapImgRestore(),deviantxr()" onMouseOver="deviantx(),MM_swapImage('dA','','images/da-ref.png',1)"><img src="images/da.png" alt="dA" name="dA" width="300" height="200" border="0"></a> 
    <a href="blog/index.php" onMouseOut="MM_swapImgRestore(),blogxr()" onMouseOver="MM_swapImage('Blog','','images/blog-ref.png',1),blogx()"><img src="images/blog.png" alt="Blog" name="Blog" width="300" height="200" border="0"></a><a href="software/index.html" onMouseOut="MM_swapImgRestore(),softxr()" onMouseOver="MM_swapImage('Software','','images/software-ref.png',1),softx()"><img src="images/software.png" alt="Software" name="Software" width="300" height="200" border="0"></a><br>
    <a href="http://igloo.crystalxp.net/sosoe222" onMouseOut="MM_swapImgRestore(),iglooxr()" onMouseOver="igloox(),MM_swapImage('iGloo','','images/igloo-ref.png',1)"><img src="images/igloo.png" alt="iGloo" name="iGloo" width="300" height="200" border="0"></a><a href="contact.php" onMouseOut="MM_swapImgRestore(),contactxr()" onMouseOver="MM_swapImage('Contact','','images/contact-ref.png',1),contactx()"><img src="images/contact.png" alt="Contact" name="Contact" width="300" height="200" border="0"></a></p>
</div>
</body>
</html>

**Thirsteen** · 12-29-2007 09:21 AM

do people still use IE 6?...

**scorch94** · 12-29-2007 12:52 PM

Errm... yes?

***Spartan Erik*** · 12-29-2007 02:56 PM

I have IE6 only because IE7 looks terrible, and a lot of Windows Updates require IE to be installed (I just don't use it because FF exists).

Could you give us an example of what your page looks like in FF versus IE6?

**scorch94** · 12-29-2007 03:39 PM

Of course. Here is Firefox screenshot: link
IE screenshot: link

**coolv1994** · 12-29-2007 06:20 PM

i use ie7 but any way i reccommend converting the images to a gif format

**mr kennedy** · 12-30-2007 06:57 AM

Originally Posted by coolv1994

i use ie7 but any way i reccommend converting the images to a gif format

he wants transparency... saving it to gif won't help lol

**Jesse** · 12-30-2007 07:00 AM

Try editting the image at photoshop?

**scorch94** · 12-30-2007 07:13 AM

Erm, I made those images in Photoshop. When I save them in GIF, they look quite desperate. Guys, I really need some help, I'm a beginner

**Sharky** · 12-30-2007 09:29 AM

Umm, if the only problem is in http://i14.tinypic.com/869wbv8.jpg, can you not just make the background of the images white without the transparency?

EDIT:

Found a JavaScript-based PNG fix for Internet Explorer 5.5 and 6 on Windows on the web: http://homepage.ntlworld.com/bobosola/ Haven't read in to it but it could be what you're looking for?

Thread: Internet Explorer 6 PNG Transparency

LinkBack

Thread Tools

Display

Internet Explorer 6 PNG Transparency

Re: Internet Explorer 6 PNG Transparency

Re: Internet Explorer 6 PNG Transparency

Re: Internet Explorer 6 PNG Transparency

Re: Internet Explorer 6 PNG Transparency

Re: Internet Explorer 6 PNG Transparency

Re: Internet Explorer 6 PNG Transparency

Re: Internet Explorer 6 PNG Transparency

Re: Internet Explorer 6 PNG Transparency

Re: Internet Explorer 6 PNG Transparency

Similar Threads

Internet Explorer 7 Proves Buggy Already

This might help when asking,"why is my country not allowed?"

Internet Explorer or Firefox

Problema instalar simplemente FLASH en internet explorer

Mi página no abre con Internet Explorer solo con Mozilla

Posting Permissions