D
Doug van Vianen
Hi,
I have the following coding on a web page. It causes two pictures (pic1.jpg
and pic2.jpg)
to show, one above the other and then when one clicks on the top picture is
squeezes to
the left (as its width is reduced) to show the bottom picture. Then when the
bottom
picture is clicked the top picture expands to the right to cover the bottom
picture again.
Much of the coding is simply to show the pictures a suitable size for the
user's screen
size.
<script language="JavaScript">
<!--
var scnwid=screen.width;
var scnhei=screen.height;
var ii=0;
var maxii=20;
var widthf=0;
var widthw=0;
var winc=0;
var topd=10;
var leftd=0;
var heightf=350;
var msgtop=0;
function Init() {
// set widths and heights of pictures and divs to match screen size
widthf=0.875*scnwid;
heightf=.6*scnhei;
leftd=(scnwid-widthf)/2;
widthw=widthf;
document.pic1.width = widthf;
document.pic1.height = heightf;
var ref=document.getElementById("div1");
ref.style.top=topd;
ref.style.left=leftd;
ref.style.width=widthf;
ref.style.height=heightf;
document.pic2.width = widthf;
document.pic2.height = heightf;
var ref=document.getElementById("div2");
ref.style.top=topd;
ref.style.left=leftd;
ref.style.width=widthf;
ref.style.height=heightf;
msgtop=heightf+topd;
var ref3=document.getElementById("div3");
ref3.style.top=msgtop;
ref3.style.left=leftd;
}
function ChgSize(updown) {
winc=widthf/maxii;
winc=updown*winc;
ii=0;
DoPics();
}
function DoPics() {
widthw=widthw-winc;
document.pic1.width = widthw;
ii=ii+1;
if (ii<maxii) {
setTimeout("DoPics()",30);
}
}
-->
</script>
</head>
<body onLoad="Init();return true">
<div id=div1
style="position:absolute;left:10;top:10;width:700;height:350;z-index:1;">
<a href="JavaScript:void(0)" onClick="ChgSize(1); return true"><img
name="pic1" border=0 src="pic1.jpg" width=700 height=400></a>
</div>
<div id=div2
style="position:absolute;left:10;top:10;width:700;height:350;z-index:0;">
<a href="JavaScript:void(0)" onClick="ChgSize(-1); return true"><img
name="pic2" border=0 src="pic2.JPG" width=700 height=400></a>
</div>
<p>
<center>
<div id=div3 style="position:absolute;left:10;top:10;z-index:0;">
Click on the picture to see the other picture.
</div>
</center>
The coding and web page work fine when I display it using the web page
editor I wrote in
Microsoft Visual Basic 6 but not when I view the page using Internet
Explorer. When I do
the latter there are often, but not always, white flashes that appear as the
one picture
width is reduced or expanded. It acts as if the picture with the new width
is not fully
displayed before it is time to reduce it by the next increment.
I am surprised by this since I thought that the browser window in my web
page editor used
the same coding as Internet Explorer.
I have tried to preload the pictures but this did not make any difference.
Can someone help me with this problem? Is there a better way to do the same
thing?
Thank you.
Doug vV
I have the following coding on a web page. It causes two pictures (pic1.jpg
and pic2.jpg)
to show, one above the other and then when one clicks on the top picture is
squeezes to
the left (as its width is reduced) to show the bottom picture. Then when the
bottom
picture is clicked the top picture expands to the right to cover the bottom
picture again.
Much of the coding is simply to show the pictures a suitable size for the
user's screen
size.
<script language="JavaScript">
<!--
var scnwid=screen.width;
var scnhei=screen.height;
var ii=0;
var maxii=20;
var widthf=0;
var widthw=0;
var winc=0;
var topd=10;
var leftd=0;
var heightf=350;
var msgtop=0;
function Init() {
// set widths and heights of pictures and divs to match screen size
widthf=0.875*scnwid;
heightf=.6*scnhei;
leftd=(scnwid-widthf)/2;
widthw=widthf;
document.pic1.width = widthf;
document.pic1.height = heightf;
var ref=document.getElementById("div1");
ref.style.top=topd;
ref.style.left=leftd;
ref.style.width=widthf;
ref.style.height=heightf;
document.pic2.width = widthf;
document.pic2.height = heightf;
var ref=document.getElementById("div2");
ref.style.top=topd;
ref.style.left=leftd;
ref.style.width=widthf;
ref.style.height=heightf;
msgtop=heightf+topd;
var ref3=document.getElementById("div3");
ref3.style.top=msgtop;
ref3.style.left=leftd;
}
function ChgSize(updown) {
winc=widthf/maxii;
winc=updown*winc;
ii=0;
DoPics();
}
function DoPics() {
widthw=widthw-winc;
document.pic1.width = widthw;
ii=ii+1;
if (ii<maxii) {
setTimeout("DoPics()",30);
}
}
-->
</script>
</head>
<body onLoad="Init();return true">
<div id=div1
style="position:absolute;left:10;top:10;width:700;height:350;z-index:1;">
<a href="JavaScript:void(0)" onClick="ChgSize(1); return true"><img
name="pic1" border=0 src="pic1.jpg" width=700 height=400></a>
</div>
<div id=div2
style="position:absolute;left:10;top:10;width:700;height:350;z-index:0;">
<a href="JavaScript:void(0)" onClick="ChgSize(-1); return true"><img
name="pic2" border=0 src="pic2.JPG" width=700 height=400></a>
</div>
<p>
<center>
<div id=div3 style="position:absolute;left:10;top:10;z-index:0;">
Click on the picture to see the other picture.
</div>
</center>
The coding and web page work fine when I display it using the web page
editor I wrote in
Microsoft Visual Basic 6 but not when I view the page using Internet
Explorer. When I do
the latter there are often, but not always, white flashes that appear as the
one picture
width is reduced or expanded. It acts as if the picture with the new width
is not fully
displayed before it is time to reduce it by the next increment.
I am surprised by this since I thought that the browser window in my web
page editor used
the same coding as Internet Explorer.
I have tried to preload the pictures but this did not make any difference.
Can someone help me with this problem? Is there a better way to do the same
thing?
Thank you.
Doug vV