kippie
Technical User
- Nov 8, 2001
- 158
A trial page of my website works fine in IE5.5 but gives problems with IE6 (and WindowsXP on my system). 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 as well as with IE6 and Win98 but which IE6 and WinXP 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?
This is the address:
And this is the code:
<html>
<head>
<script language="JavaScript"><!--
var isIE=document.all?true:false;
var isDOM=document.getElementById?true:false;
var isNS4=document.layers?true:false;
//this function preloads the images for the image frame and the backgrounds of the textframe:
function getImages() {
bg4 = new Image();
bg4.src = "bgMidnight.gif";
bg41 = new Image();
bg41.src = "bgGoldenrod.gif";
bg50 = new Image();
bg50.src = "bgKhaki.gif";
bg51 = new Image();
bg51.src = "bgRoyalBlue.gif";
alt10 = new Image();
alt10.src = "WZWmanopschommel2.jpg";
alt20 = new Image();
alt20.src = "CQkolk2.jpg";
alt30 = new Image();
alt30.src = "CQpuzzle2.jpg";
alt40 = new Image();
alt40.src = "EQmanmetkinderwagen2.jpg";
}
// -->
</script>
<script language="JavaScript"><!--
//These are the texts to appear in the textframe
var Home = '<div class="infohead">Dit is ExperienceTraining<\/div>'
var WZWmsg0 = '<div class="infohead">Wie zijn wij?<\/div>'
var CQmsg0 = '<div class="headwhite">Creatieve Intelligentie (CQ)<\/div>'
var EQmsg0 = '<div class="headwhite">Emotionele Intelligentie<\/div>'
//This is the function to change text on a changing background in the textframe:
function htmlChange(id,message, bg){
d=document;
re=d.all?d.all[id]:d.getElementById(id);
re.innerHTML=message;
re.style.background = "url("+bg+"
";
}
//This is the function which changes images in the imageframe:
function rewriteImg(id,imgName){
d=document;
re=d.all?d.all[id]:d.getElementById(id);
//re.innerHTML="<img src='"+eval(imgName + ".src"+"'>";
re.innerHTML="<img src='"+eval(imgName + ".src"+"' height='100%' width='100%'>";
}
// -->
</script>
<style type="text/css"><!--
.headwhite { color: #ffffff; font-weight: 700; font-size: 17px; font-family: Arial; text-align: left; width: 100% }
.infohead { color: #191970; font-weight: 700; font-size: 17px; font-family: Arial; text-align: left; width: 100% }
A.top:link { color: white; font-weight: bold; font-family: Arial; font-size: 13px; text-decoration: none}
A.top:visited { color: white; font-weight: bold; font-family: Arial; font-size: 13px; text-decoration: none}
A.top:hover { color: #4169E1; font-weight: bold; font-family: Arial; font-size: 13px; text-decoration: none }
A.top:active { color: lightskyblue; font-weight: bold; font-family: Arial; font-size: 13px; text-decoration: none }
</style>
</head>
<body background="wereldatlas4.jpg" onload="getImages()">
<table border="0" bordercolor="red" width="600" height="325" cellpadding="0" cellspacing="0">
<tr height="25">
<td id="headmenu" colspan="2" height="25"><a href="#" class="top" onclick="htmlChange('textframe',Home,'bgRoyalBlue.gif'); rewriteImg('imageframe','alt10');">Home</a><img src="dot.gif" width="25" height="1"><a href="#" 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="#" class="top" onclick="htmlChange('textframe',CQmsg0,'bgGoldenrod.gif'); rewriteImg('imageframe','alt30');">CQ</a><img src="dot.gif" width="25" height="1"><a href="#" class="top" onclick="rewriteImg('imageframe','alt40'); htmlChange('textframe',EQmsg0,'bgMidnightBlue.gif');">EQ</a></td>
</tr>
<tr height="300">
<td id="imageframe" width="220" height="300"><img src="WZWmanopschommel2.jpg" height="100%" width="100%"></td>
<td id="textframe" bgcolor="#4169E1" width="380" height="300">Dit is ExperienceTraining</td>
</tr>
</table>
</body>
</html>
Kippie
This is the address:
And this is the code:
<html>
<head>
<script language="JavaScript"><!--
var isIE=document.all?true:false;
var isDOM=document.getElementById?true:false;
var isNS4=document.layers?true:false;
//this function preloads the images for the image frame and the backgrounds of the textframe:
function getImages() {
bg4 = new Image();
bg4.src = "bgMidnight.gif";
bg41 = new Image();
bg41.src = "bgGoldenrod.gif";
bg50 = new Image();
bg50.src = "bgKhaki.gif";
bg51 = new Image();
bg51.src = "bgRoyalBlue.gif";
alt10 = new Image();
alt10.src = "WZWmanopschommel2.jpg";
alt20 = new Image();
alt20.src = "CQkolk2.jpg";
alt30 = new Image();
alt30.src = "CQpuzzle2.jpg";
alt40 = new Image();
alt40.src = "EQmanmetkinderwagen2.jpg";
}
// -->
</script>
<script language="JavaScript"><!--
//These are the texts to appear in the textframe
var Home = '<div class="infohead">Dit is ExperienceTraining<\/div>'
var WZWmsg0 = '<div class="infohead">Wie zijn wij?<\/div>'
var CQmsg0 = '<div class="headwhite">Creatieve Intelligentie (CQ)<\/div>'
var EQmsg0 = '<div class="headwhite">Emotionele Intelligentie<\/div>'
//This is the function to change text on a changing background in the textframe:
function htmlChange(id,message, bg){
d=document;
re=d.all?d.all[id]:d.getElementById(id);
re.innerHTML=message;
re.style.background = "url("+bg+"
"; }
//This is the function which changes images in the imageframe:
function rewriteImg(id,imgName){
d=document;
re=d.all?d.all[id]:d.getElementById(id);
//re.innerHTML="<img src='"+eval(imgName + ".src"
+"'>"; re.innerHTML="<img src='"+eval(imgName + ".src"
+"' height='100%' width='100%'>"; }
// -->
</script>
<style type="text/css"><!--
.headwhite { color: #ffffff; font-weight: 700; font-size: 17px; font-family: Arial; text-align: left; width: 100% }
.infohead { color: #191970; font-weight: 700; font-size: 17px; font-family: Arial; text-align: left; width: 100% }
A.top:link { color: white; font-weight: bold; font-family: Arial; font-size: 13px; text-decoration: none}
A.top:visited { color: white; font-weight: bold; font-family: Arial; font-size: 13px; text-decoration: none}
A.top:hover { color: #4169E1; font-weight: bold; font-family: Arial; font-size: 13px; text-decoration: none }
A.top:active { color: lightskyblue; font-weight: bold; font-family: Arial; font-size: 13px; text-decoration: none }
</style>
</head>
<body background="wereldatlas4.jpg" onload="getImages()">
<table border="0" bordercolor="red" width="600" height="325" cellpadding="0" cellspacing="0">
<tr height="25">
<td id="headmenu" colspan="2" height="25"><a href="#" class="top" onclick="htmlChange('textframe',Home,'bgRoyalBlue.gif'); rewriteImg('imageframe','alt10');">Home</a><img src="dot.gif" width="25" height="1"><a href="#" 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="#" class="top" onclick="htmlChange('textframe',CQmsg0,'bgGoldenrod.gif'); rewriteImg('imageframe','alt30');">CQ</a><img src="dot.gif" width="25" height="1"><a href="#" class="top" onclick="rewriteImg('imageframe','alt40'); htmlChange('textframe',EQmsg0,'bgMidnightBlue.gif');">EQ</a></td>
</tr>
<tr height="300">
<td id="imageframe" width="220" height="300"><img src="WZWmanopschommel2.jpg" height="100%" width="100%"></td>
<td id="textframe" bgcolor="#4169E1" width="380" height="300">Dit is ExperienceTraining</td>
</tr>
</table>
</body>
</html>
Kippie
