0

Hi everyone,

I've spent the better part of 3 days searching the web and trying multiple rotating image scripts to no avail.... every time I try one, it seems to break my page, or just not work. I am not skilled at Java, and am not even sure if that is the appropriate technology to use for something like this, but I need help. I can read directions and make my way through code - but I'm at a loss as to why I can't get any of these scripts to work. Maybe they are interfering with other java on the same page? I don't know.....

What I'm trying to accomplish is to replace a background image in a table on an .asp page with a script of some kind that will display one of several .jpg images, either on refresh or in a rotating manner. All images are the same size.

It is important to me that if I use Java, and it is disabled in the viewers browser, that at least a static background image is seen.

What are the best ways to go with something like this? Ajax? Java? DHTML?

Any suggestions would be appreciated!

Thanks!

Vicky

2
Contributors
1
Reply
2
Views
7 Years
Discussion Span
Last Post by madmital
0

First of all: be sure to call it javaSCRIPT.
Java and Javascript are two very different things that share just about nothing beside the first four letters in their names.

Script you find on the web may easily interfere with script already on the page. Use the Firefox Error Console (or an extension like FireBug) to check for any conflicts in scripts.

To overcomes disabled javascript I would assign an image to the table background from the .asp. That way you can ensure that the user always sees an image.
Secondly write a little javascript to change the image on interval.
Something like this would do (tested in FF only):

<html>
<head>
<script type="text/javascript">
// image array can also be output from asp :)
var images = new Array("image.jpg", "image1.jpg", "image2.jpg");
var intImagesIndex = 0;
var interval;
function startJavascript() {
	var intChangeSpeed = 2000; // in miliseconds
	interval = setInterval("changeImage()", intChangeSpeed);
}
function changeImage() {
	var obj = document.getElementById("tblId");
	if(obj) { // if table element was found
		intImagesIndex++; // increment index variable
		if(intImagesIndex >= images.length) // make sure variable value is not larger than array length (-1)
			intImagesIndex = 0;
		obj.style.background = "url('" + images[intImagesIndex] + "')"; // assign new backgroundimage
	}
}

</script>
</head>
<body onload="startJavascript();">
	<table id="tblId" style="background: url('image.jpg');">
		<tr>
			<td>A cell</td>
		</tr>
		<tr>
			<td>Another cell</td>
		</tr>
	</table>
</body>

</html>
This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.