Forum Moderators: open
I am trying to create a slideshow within a table cell. There are elements that need to go over the slideshow, a .png image as well as a dropdown menu. The only way I've been able to make it work is to have the images I want to rotate be in the background... but I cant get them to rotate :(
Please help,
Thanks!
PS Sorry I'm new to web design, is this even possible?
[edited by: incrediBILL at 6:02 pm (utc) on Jan. 11, 2010]
[edit reason] no link drops, url removed [/edit]
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!-- doctype on one line -->
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Rotate BG images</title>
<style type="text/css">
#tbl { width:100px;border:1px solid #000;margin:auto; }
#slide-show { height:100px; }
</style>
<script type="text/javascript">
var imgs = new Array (
'can.gif',
'can2.gif',
'grnwidg.gif',
'graywidg.gif'
);
var current_img=0;
// This is what loads the first image, seeding the rotation.
window.onload=function() {
if (document.getElementById('slide-show')) {
nextImage();
}
};
// Note setTimeout, rotates every five seconds
// when the end of the list is reached, starts over.
function nextImage() {
document.getElementById('slide-show').style.background=
"url("+imgs[current_img]+") top left no-repeat";
current_img=((current_img+1)>(imgs.length-1))?0:current_img+1;
setTimeout('nextImage()',5000);
}
</script>
</head>
<body>
<table id="tbl">
<tr><td id="slide-show">
Image Behind.<br>
Image Behind.<br>
Image Behind.<br>
Image Behind.<br>
</td></tr>
</table>
</body>
</html>
