A trial page of my website works fine in IE5.5 but gives problems with IE6. When using the menu an image swaps in the left window and a text in the right. With IE 5.5 the swapping goes smootly but which IE6 there are gaps between each swapping so you see each time the backgroundimage. In the final website this will be a bigger problem so I would like to solve it. Can anyone help?<br />
This is the address: <!-- w --><a class="postlink" href="http://www.experiencetraining.nl/backimg13.html">www.experiencetraining.nl/backimg13.html</a><!-- w --> <br />
And this is the code:<br />
<html><br />
<head><br />
<br />
<script language="JavaScript"><!--<br />
var isIE=document.all?true:false;<br />
var isDOM=document.getElementById?true:false;<br />
var isNS4=document.layers?true:false;<br />
<br />
//this function preloads the images for the image frame and the backgrounds of the textframe:<br />
function getImages() { <br />
bg4 = new Image();<br />
bg4.src = <!-- m --><a class="postlink" href="http://www.htmlforums.com/archive/index.php/">http://www.htmlforums.com/archive/index.php/</a><!-- m -->"bgMidnight.gif";<br />
bg41 = new Image();<br />
bg41.src = <!-- m --><a class="postlink" href="http://www.htmlforums.com/archive/index.php/">http://www.htmlforums.com/archive/index.php/</a><!-- m -->"bgGoldenrod.gif";<br />
bg50 = new Image();<br />
bg50.src = <!-- m --><a class="postlink" href="http://www.htmlforums.com/archive/index.php/">http://www.htmlforums.com/archive/index.php/</a><!-- m -->"bgKhaki.gif";<br />
bg51 = new Image();<br />
bg51.src = <!-- m --><a class="postlink" href="http://www.htmlforums.com/archive/index.php/">http://www.htmlforums.com/archive/index.php/</a><!-- m -->"bgRoyalBlue.gif";<br />
alt10 = new Image();<br />
alt10.src = <!-- m --><a class="postlink" href="http://www.htmlforums.com/archive/index.php/">http://www.htmlforums.com/archive/index.php/</a><!-- m -->"WZWmanopschommel2.jpg";<br />
alt20 = new Image();<br />
alt20.src = <!-- m --><a class="postlink" href="http://www.htmlforums.com/archive/index.php/">http://www.htmlforums.com/archive/index.php/</a><!-- m -->"CQkolk2.jpg";<br />
alt30 = new Image();<br />
alt30.src = <!-- m --><a class="postlink" href="http://www.htmlforums.com/archive/index.php/">http://www.htmlforums.com/archive/index.php/</a><!-- m -->"CQpuzzle2.jpg";<br />
alt40 = new Image();<br />
alt40.src = <!-- m --><a class="postlink" href="http://www.htmlforums.com/archive/index.php/">http://www.htmlforums.com/archive/index.php/</a><!-- m -->"EQmanmetkinderwagen2.jpg";<br />
}<br />
// --><br />
</script><br />
<script language="JavaScript"><!--<br />
//These are the texts to appear in the textframe<br />
var Home = '<div class="infohead">Dit is ExperienceTraining<\/div>'<br />
var WZWmsg0 = '<div class="infohead">Wie zijn wij?<\/div>'<br />
var CQmsg0 = '<div class="headwhite">Creatieve Intelligentie (CQ)<\/div>'<br />
var EQmsg0 = '<div class="headwhite">Emotionele Intelligentie<\/div>'<br />
<br />
//This is the function to change text on a changing background in the textframe: <br />
function htmlChange(id,message, bg){ <br />
d=document; <br />
re=d.all?d.all[id]:d.getElementById(id); <br />
re.innerHTML=message; <br />
re.style.background = "url("+bg+")"; <br />
} <br />
<br />
//This is the function which changes images in the imageframe:<br />
function rewriteImg(id,imgName){<br />
d=document;<br />
re=d.all?d.all[id]:d.getElementById(id);<br />
//re.innerHTML="<img src='http://www.htmlforums.com/archive/index.php/"+eval(imgName + ".src")+"'>";<br />
re.innerHTML="<img src='http://www.htmlforums.com/archive/index.php/"+eval(imgName + ".src")+"' height='100%' width='100%'>"; <br />
}<br />
// --><br />
</script><br />
<br />
<style type="text/css"><!--<br />
.headwhite { color: #ffffff; font-weight: 700; font-size: 17px; font-family: Arial; text-align: left; width: 100% }<br />
.infohead { color: #191970; font-weight: 700; font-size: 17px; font-family: Arial; text-align: left; width: 100% }<br />
<br />
A.top:link { color: white; font-weight: bold; font-family: Arial; font-size: 13px; text-decoration: none}<br />
A.top:visited { color: white; font-weight: bold; font-family: Arial; font-size: 13px; text-decoration: none}<br />
A.top:hover { color: #4169E1; font-weight: bold; font-family: Arial; font-size: 13px; text-decoration: none }<br />
A.top:active { color: lightskyblue; font-weight: bold; font-family: Arial; font-size: 13px; text-decoration: none }<br />
</style><br />
</head><br />
<br />
<body background="wereldatlas4.jpg" onload="getImages()"><br />
<table border="0" bordercolor="red" width="600" height="325" cellpadding="0" cellspacing="0"><br />
<tr height="25"><br />
<td id="headmenu" colspan="2" height="25"><a href=http://www.htmlforums.com/archive/index.php/"#" class="top" onclick="htmlChange('textframe',Home,'bgRoyalBlue.gif'); rewriteImg('imageframe','alt10');">Home</a><img src="dot.gif" width="25" height="1"><a href=http://www.htmlforums.com/archive/index.php/"#" class="top" onclick="htmlChange('textframe',WZWmsg0,'bgKhaki.gif'); rewriteImg('imageframe','alt20');">Wie zijn wij?</a><img src="dot.gif" width="25" height="1"><a href=http://www.htmlforums.com/archive/index.php/"#" class="top" onclick="htmlChange('textframe',CQmsg0,'bgGoldenrod.gif'); rewriteImg('imageframe','alt30');">CQ</a><img src=http://www.htmlforums.com/archive/index.php/"dot.gif" width="25" height="1"><a href="#" class="top" onclick="rewriteImg('imageframe','alt40'); htmlChange('textframe',EQmsg0,'bgMidnightBlue.gif');">EQ</a></td><br />
</tr><br />
<tr height="300"><br />
<td id="imageframe" width="220" height="300"><img src=http://www.htmlforums.com/archive/index.php/"WZWmanopschommel2.jpg" height="100%" width="100%"></td><br />
<td id="textframe" bgcolor="#4169E1" width="380" height="300">Dit is ExperienceTraining</td><br />
</tr><br />
</table><br />
</body><br />
</html><br />
<br />
Kippie<!--content-->works fine for me on IE6. did you restart and /or clean your cache out?<!--content-->Originally posted by kippie <br />
With IE 5.5 the swapping goes smootly but which IE6 there are gaps between each swapping so you see each time the backgroundimage. I don't see the background image when the image swaps. I have IE 6!<!--content-->works great for me in IE6.<!--content-->Thanks, thanks a lot. So there is something on my IE or PC. Does anyone have an idea what could be wrong then? Has it someting to do with the configuration? And I forgot to say that I have WindowsXP on my pc (or is that always so with IE6?). On my comp. with IE6 and WinXP you see between each "onclick" the clouds map on the background during maybe one tenth of a second, also when I have just restarted the PC.<br />
Kippie<!--content-->
This is the address: <!-- w --><a class="postlink" href="http://www.experiencetraining.nl/backimg13.html">www.experiencetraining.nl/backimg13.html</a><!-- w --> <br />
And this is the code:<br />
<html><br />
<head><br />
<br />
<script language="JavaScript"><!--<br />
var isIE=document.all?true:false;<br />
var isDOM=document.getElementById?true:false;<br />
var isNS4=document.layers?true:false;<br />
<br />
//this function preloads the images for the image frame and the backgrounds of the textframe:<br />
function getImages() { <br />
bg4 = new Image();<br />
bg4.src = <!-- m --><a class="postlink" href="http://www.htmlforums.com/archive/index.php/">http://www.htmlforums.com/archive/index.php/</a><!-- m -->"bgMidnight.gif";<br />
bg41 = new Image();<br />
bg41.src = <!-- m --><a class="postlink" href="http://www.htmlforums.com/archive/index.php/">http://www.htmlforums.com/archive/index.php/</a><!-- m -->"bgGoldenrod.gif";<br />
bg50 = new Image();<br />
bg50.src = <!-- m --><a class="postlink" href="http://www.htmlforums.com/archive/index.php/">http://www.htmlforums.com/archive/index.php/</a><!-- m -->"bgKhaki.gif";<br />
bg51 = new Image();<br />
bg51.src = <!-- m --><a class="postlink" href="http://www.htmlforums.com/archive/index.php/">http://www.htmlforums.com/archive/index.php/</a><!-- m -->"bgRoyalBlue.gif";<br />
alt10 = new Image();<br />
alt10.src = <!-- m --><a class="postlink" href="http://www.htmlforums.com/archive/index.php/">http://www.htmlforums.com/archive/index.php/</a><!-- m -->"WZWmanopschommel2.jpg";<br />
alt20 = new Image();<br />
alt20.src = <!-- m --><a class="postlink" href="http://www.htmlforums.com/archive/index.php/">http://www.htmlforums.com/archive/index.php/</a><!-- m -->"CQkolk2.jpg";<br />
alt30 = new Image();<br />
alt30.src = <!-- m --><a class="postlink" href="http://www.htmlforums.com/archive/index.php/">http://www.htmlforums.com/archive/index.php/</a><!-- m -->"CQpuzzle2.jpg";<br />
alt40 = new Image();<br />
alt40.src = <!-- m --><a class="postlink" href="http://www.htmlforums.com/archive/index.php/">http://www.htmlforums.com/archive/index.php/</a><!-- m -->"EQmanmetkinderwagen2.jpg";<br />
}<br />
// --><br />
</script><br />
<script language="JavaScript"><!--<br />
//These are the texts to appear in the textframe<br />
var Home = '<div class="infohead">Dit is ExperienceTraining<\/div>'<br />
var WZWmsg0 = '<div class="infohead">Wie zijn wij?<\/div>'<br />
var CQmsg0 = '<div class="headwhite">Creatieve Intelligentie (CQ)<\/div>'<br />
var EQmsg0 = '<div class="headwhite">Emotionele Intelligentie<\/div>'<br />
<br />
//This is the function to change text on a changing background in the textframe: <br />
function htmlChange(id,message, bg){ <br />
d=document; <br />
re=d.all?d.all[id]:d.getElementById(id); <br />
re.innerHTML=message; <br />
re.style.background = "url("+bg+")"; <br />
} <br />
<br />
//This is the function which changes images in the imageframe:<br />
function rewriteImg(id,imgName){<br />
d=document;<br />
re=d.all?d.all[id]:d.getElementById(id);<br />
//re.innerHTML="<img src='http://www.htmlforums.com/archive/index.php/"+eval(imgName + ".src")+"'>";<br />
re.innerHTML="<img src='http://www.htmlforums.com/archive/index.php/"+eval(imgName + ".src")+"' height='100%' width='100%'>"; <br />
}<br />
// --><br />
</script><br />
<br />
<style type="text/css"><!--<br />
.headwhite { color: #ffffff; font-weight: 700; font-size: 17px; font-family: Arial; text-align: left; width: 100% }<br />
.infohead { color: #191970; font-weight: 700; font-size: 17px; font-family: Arial; text-align: left; width: 100% }<br />
<br />
A.top:link { color: white; font-weight: bold; font-family: Arial; font-size: 13px; text-decoration: none}<br />
A.top:visited { color: white; font-weight: bold; font-family: Arial; font-size: 13px; text-decoration: none}<br />
A.top:hover { color: #4169E1; font-weight: bold; font-family: Arial; font-size: 13px; text-decoration: none }<br />
A.top:active { color: lightskyblue; font-weight: bold; font-family: Arial; font-size: 13px; text-decoration: none }<br />
</style><br />
</head><br />
<br />
<body background="wereldatlas4.jpg" onload="getImages()"><br />
<table border="0" bordercolor="red" width="600" height="325" cellpadding="0" cellspacing="0"><br />
<tr height="25"><br />
<td id="headmenu" colspan="2" height="25"><a href=http://www.htmlforums.com/archive/index.php/"#" class="top" onclick="htmlChange('textframe',Home,'bgRoyalBlue.gif'); rewriteImg('imageframe','alt10');">Home</a><img src="dot.gif" width="25" height="1"><a href=http://www.htmlforums.com/archive/index.php/"#" class="top" onclick="htmlChange('textframe',WZWmsg0,'bgKhaki.gif'); rewriteImg('imageframe','alt20');">Wie zijn wij?</a><img src="dot.gif" width="25" height="1"><a href=http://www.htmlforums.com/archive/index.php/"#" class="top" onclick="htmlChange('textframe',CQmsg0,'bgGoldenrod.gif'); rewriteImg('imageframe','alt30');">CQ</a><img src=http://www.htmlforums.com/archive/index.php/"dot.gif" width="25" height="1"><a href="#" class="top" onclick="rewriteImg('imageframe','alt40'); htmlChange('textframe',EQmsg0,'bgMidnightBlue.gif');">EQ</a></td><br />
</tr><br />
<tr height="300"><br />
<td id="imageframe" width="220" height="300"><img src=http://www.htmlforums.com/archive/index.php/"WZWmanopschommel2.jpg" height="100%" width="100%"></td><br />
<td id="textframe" bgcolor="#4169E1" width="380" height="300">Dit is ExperienceTraining</td><br />
</tr><br />
</table><br />
</body><br />
</html><br />
<br />
Kippie<!--content-->works fine for me on IE6. did you restart and /or clean your cache out?<!--content-->Originally posted by kippie <br />
With IE 5.5 the swapping goes smootly but which IE6 there are gaps between each swapping so you see each time the backgroundimage. I don't see the background image when the image swaps. I have IE 6!<!--content-->works great for me in IE6.<!--content-->Thanks, thanks a lot. So there is something on my IE or PC. Does anyone have an idea what could be wrong then? Has it someting to do with the configuration? And I forgot to say that I have WindowsXP on my pc (or is that always so with IE6?). On my comp. with IE6 and WinXP you see between each "onclick" the clouds map on the background during maybe one tenth of a second, also when I have just restarted the PC.<br />
Kippie<!--content-->