kippie
01-07-2006, 03:58 PM
In the HTML below I should like to show div id="d6" 2 seconds after the start. I understand that I have to use setTimeOut command but I have no idea how to do this. This is the HTML I have sofar:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD>
<TITLE>Demo</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
var vis="d1"
function showdiv(thething) {
if (thething != vis)
{
if (document.all) {
thisthing = document.all(vis).style;
nextthing = document.all(thething).style;
}
else if (document.getElementById) {
thisthing = document.getElementById(vis).style;
nextthing = document.getElementById(thething).style;}
else if (document.layers) {
thisthing = document.layers[vis];
nextthing = document.layers[thething]; }
nextthing.visibility = "visible";
thisthing.visibility = "hidden";
vis=thething;
}
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<A HREF="#" onmouseover="showdiv('d1')">Show 1</A><br>
<A HREF="#" onmouseover="showdiv('d2')">Show 2</A><br>
<A HREF="#" onmouseover="showdiv('d3')">Show 3</A><br>
<A HREF="#" onmouseover="showdiv('d4')">Show 4</A><br>
<A HREF="#" onmouseover="showdiv('d5')">Show 5</A><br>
<A HREF="#" onmouseover="showdiv('d6')">Show 6</A><br>
<div id="d1" STYLE="position:absolute;left:110;top:10;"><img src='draaikolk.jpg' width="50" height="50" alt=""></div>
<div id="d2" STYLE="position:absolute;left:120;top:20;visibility:hidden"><img src='draaikolk.jpg' width="50" height="50" alt=""></div>
<div id="d3" STYLE="position:absolute;left:130;top:40;visibility:hidden"><img src='draaikolk.jpg' width="50" height="50" alt=""></div>
<div id="d4" STYLE="position:absolute;left:140;top:60;visibility:hidden"><img src='draaikolk.jpg' width="50" height="50" alt=""></div>
<div id="d5" STYLE="position:absolute;left:150;top:70;visibility:hidden"><img src='draaikolk.jpg' width="50" height="50" alt=""></div>
<div id="d6" STYLE="position:absolute;left:160;top:100;visibility:hidden"><img src='draaikolk.jpg' width="50" height="50" alt=""></div>
</BODY>
</HTML>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD>
<TITLE>Demo</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
var vis="d1"
function showdiv(thething) {
if (thething != vis)
{
if (document.all) {
thisthing = document.all(vis).style;
nextthing = document.all(thething).style;
}
else if (document.getElementById) {
thisthing = document.getElementById(vis).style;
nextthing = document.getElementById(thething).style;}
else if (document.layers) {
thisthing = document.layers[vis];
nextthing = document.layers[thething]; }
nextthing.visibility = "visible";
thisthing.visibility = "hidden";
vis=thething;
}
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<A HREF="#" onmouseover="showdiv('d1')">Show 1</A><br>
<A HREF="#" onmouseover="showdiv('d2')">Show 2</A><br>
<A HREF="#" onmouseover="showdiv('d3')">Show 3</A><br>
<A HREF="#" onmouseover="showdiv('d4')">Show 4</A><br>
<A HREF="#" onmouseover="showdiv('d5')">Show 5</A><br>
<A HREF="#" onmouseover="showdiv('d6')">Show 6</A><br>
<div id="d1" STYLE="position:absolute;left:110;top:10;"><img src='draaikolk.jpg' width="50" height="50" alt=""></div>
<div id="d2" STYLE="position:absolute;left:120;top:20;visibility:hidden"><img src='draaikolk.jpg' width="50" height="50" alt=""></div>
<div id="d3" STYLE="position:absolute;left:130;top:40;visibility:hidden"><img src='draaikolk.jpg' width="50" height="50" alt=""></div>
<div id="d4" STYLE="position:absolute;left:140;top:60;visibility:hidden"><img src='draaikolk.jpg' width="50" height="50" alt=""></div>
<div id="d5" STYLE="position:absolute;left:150;top:70;visibility:hidden"><img src='draaikolk.jpg' width="50" height="50" alt=""></div>
<div id="d6" STYLE="position:absolute;left:160;top:100;visibility:hidden"><img src='draaikolk.jpg' width="50" height="50" alt=""></div>
</BODY>
</HTML>