PDA

View Full Version : Table Background Image Loop



waterlili89
Jul 2nd, 2007, 05:08 PM
I would like the background image of a table to cycle through several different images when you click on a link. Here's what I have so far:

<html>
<head>

<script>
function change() {
var backgroundSrcs = new Array("images/alex_c_potter.png","images/ate_a_bug.jpg","images/daynawashere.jpg");
var x=0;

document.getElementById("table").style.backgroundImage = "url('" + backgroundSrcs[++x] + "')";
}
</script>

<style type='text/css'>
#table {
background-image: url(images/alex_c_potter.png);
height: 100px;
width: 100px;
}
</style>

</head>
<body>

<table width="100" border="0" cellpadding="0" cellspacing="0" id="table">
<tr>
<td>&nbsp;</td>
</tr>
</table>

<p>
<a href="#" onClick="change()">click me</a>
</p>
</body>
</html>



When you click the link, the image changes once, but then stops. I would like for to loop through all three images repeatedly.

Thank you!

Marth
Jul 2nd, 2007, 05:22 PM
var x=0;
var backgroundSrcs = new Array("images/alex_c_potter.png","images/ate_a_bug.jpg","images/daynawashere.jpg");

function change(x) {
document.getElementById("table").style.backgroundImage = "url('" + backgroundSrcs[x] + "')";

setTimeout("change(++x);", 1000);
}

haven't tested this but you could try the setTimeout("change(++x);", 1000);
where 1000 is the interval between two images.

waterlili89
Jul 2nd, 2007, 05:33 PM
Thanks! I'll go try it.

waterlili89
Jul 2nd, 2007, 05:40 PM
Oh no, not working, actually ...

Marth
Jul 2nd, 2007, 05:59 PM
Did you change the onClick to:

onClick="change(0)"

waterlili89
Jul 2nd, 2007, 09:19 PM
Ohhh right! Good point, no, I didn't. Thanks again.

waterlili89
Jul 2nd, 2007, 09:24 PM
Heh never mind, that didn't help, either. But thanks anyway.

_Aerospace_Eng_
Jul 2nd, 2007, 09:36 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Changing background image with link</title>
<script type="text/javascript">
// set x to -1 onload so the function will use 0 for x when it runs
var x = -1;

// declare the array outside of the function, no need to redeclare it each time change() function is ran
var backgroundSrcs = new Array("images/alex_c_potter.png","images/ate_a_bug.jpg","images/daynawashere.jpg");

function change()
{
// set x to -1 if you get to the end of the array, so it starts over
if(x == (backgroundSrcs.length - 1)) x = -1;

// you had this part correct
document.getElementById("table").style.backgroundImage = "url('" + backgroundSrcs[++x] + "')";
}

// this will rotate the images automatically, every second
setTimeout("change()",1000);
</script>
<style type="text/css">
#table {
background-image: url(images/alex_c_potter.png);
height: 100px;
width: 100px;
}
</style>
</head>
<body>
<!--no need to use a table, besides tables aren't for page layout-->
<div id="table"></div>

<!--you need to add return false to the link so it doesn't go anywhere-->
<p><a href="#" onClick="change();return false">click me</a></p>
</body>
</html>
FYI you CAN edit your own posts you know rather than just create new ones.

waterlili89
Jul 2nd, 2007, 09:58 PM
First of all, thank you.

Second of all, what do you mean? I'm sorry if I did something wrong, but I'm not sure what I did.

^^Oh, haha, you meant posts, not threads. Right, I double posted. Sorry.