Menu
In the HTML below I have 2 rectantgular divs which can slide upwards. Now I would like to change those 2 divs into 2 jpg-images so that image1.jpg and image2.jpg can slide upwards. But I cannot get it done. Can someone help?
This is the HTML:
<html>
<head>
<title>The Dynamic Duo – Sliding Demo 1</title>
<script language=”JavaScript”>
<!–
ns4 = (document.layers)? true:false
ie4 = (document.all && !document.getElementById) ? true:false
newBrwsr = (document.getElementById) ? true:false
numblock = 2
block = [numblock]
t_out = [numblock] //set a timeout return var to enable cancelation
function init() {
if (ns4) {
for(var i = 0;i < numblock;i++){
block[i] = document.layers[“blockDiv” + i]
}
} else if(ie4) {
for(var i = 0;i < numblock;i++){
block[i] = document.all(“blockDiv” + i).style
}
} else {
for(var i = 0;i < numblock;i++){
block[i] = document.getElementById(“blockDiv” + i).style
}
}
for(var i = 0;i < numblock;i++){
block[i].ypos = parseInt(block[i].top)
}
}
function startSlide(){
for(var i = 0;i < numblock;i++){
t_out[i] = window.setTimeout(“slide(” + i + “)”,Math.floor(Math.random() * (Math.sqrt(i) * 13000)))
}
}
function slide(num) {
if (block[num].ypos < 500) {
block[num].ypos -= 1
block[num].top = block[num].ypos
t_out[num] = window.setTimeout(“slide(” + num + “)”,35)
} else {
block[num].ypos = 500
window.clearTimeout(t_out[num])
}
}
function restart() {
for(var i = 0;i < numblock;i++){
block[i].ypos = 450
block[i].top = block[i].ypos
}
}
//–>
</script>
</head>
<body bgcolor=”#ffffff” onload=”init()”>
<img src=”image1.png” width=”100″ height=”100″>
<img src=”image2.png” width=”100″ height=”100″>
<a href=”javascript:startSlide()”>slide</a> – <a href=”javascript:restart(1)”>restart</a>
<div id=”blockDiv0″ style=”position:absolute; left:100px; top:450px; width:30px; height:30px; clip:rect(0,30,30,0); background-color:green;”></div>
<div id=”blockDiv1″ style=”position:absolute; left:150px; top:450px; width:30px; height:30px; clip:rect(0,30,30,0); background-color:blue;”> </div>
</body>
</html>