PDA

Click to See Complete Forum and Search --> : How to change these div's into jpg's?

haan
07-20-2003, 02:11 PM
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>
David Harrison
07-20-2003, 04:54 PM
Change the bottom part of your source to this:

<body bgcolor="#ffffff" onload="init()">
<img src="image1.png" width="100" height="100">
<img src="image2.png" width="100" height="100">
<a href="java script:startSlide()">slide</a> - <a href="javascript:restart(1)">restart</a>
<img src="slide_img1.png" id="blockDiv0" alt="Sliding Image" style="position:absolute; left:100px;top:450px; width:30px; height:30px; clip:rect(0,30,30,0);background-color:green;"></div>
<img src="slide_img2.png" id="blockDiv1" alt="Sliding Image" style="position:absolute; left:150px;top:450px; width:30px; height:30px; clip:rect(0,30,30,0);background-color:blue;"> </div>
</body>
</html>

You should put the alt attribute into every img tag that you use, so that if the images don't load or a user is using an audio browser they will see/hear some alternate text that describes your images.
haan
07-21-2003, 12:44 AM
Thanks Lavalamp,

One more question if I'm allowed. In the script a random number determines the timing of the sliding. Is there a way to set the delay times between the different starts of the blocks. I mean for example one second between the different starts?
David Harrison
07-21-2003, 02:03 PM
Change this:
Math.floor(Math.random() * (Math.sqrt(i) * 13000))

To this:
(i*1000)

also for the links, instead of things like this:
<a href="javascript:startSlide()">slide</a>

have things like this:
<a href="#" onclick="startSlide();">slide</a>