Internet Explorer 6 PNG Transparency

Status
Not open for further replies.

scorch94

Member
Messages
228
Reaction score
0
Points
16
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>
 

Spartan Erik

Retired
Messages
6,764
Reaction score
0
Points
0
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?
 
Last edited:

coolv1994

Member
Messages
508
Reaction score
0
Points
16
i use ie7 but any way i reccommend converting the images to a gif format
 

scorch94

Member
Messages
228
Reaction score
0
Points
16
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 :)
 

scorch94

Member
Messages
228
Reaction score
0
Points
16
Hey, Sharky!
I found that site earlier, but I couldn't find the script that would help me with my rollover images. I tried all the scripts available there, but none worked out :p

Thanks for the search anyway ;)
Much appreciated!
 
Status
Not open for further replies.
Top