Member Avatar for lelady

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
  • 146 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by madmital
Member Avatar for madmital

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>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.