PDA

Click to See Complete Forum and Search --> : Images on a site (how to switch when page is refreshed?)

CLEN
01-04-2008, 02:09 PM
Hi! I was just wondering if anyone knew how to make images on a webpage change to different ones every time the page is visited (or is "Refreshed/Reloaded" with the browser)?

What I mean can be seen on the following website:

http://www.tacoma.washington.edu/

If you go there and refresh/reload the page, the images on there will change to different ones, and so i wanted to know how one can do that? Is there some special kind of code for it? I'm using Dreamweaver 8 right now...just wondering.

Thanks in advance!
dtm32236
01-04-2008, 03:08 PM
in the head:
<script type="text/javascript">

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Begin
// Set up the image files to be used.
var theImages = new Array() // do not change this
// To add more image files, continue with the
// pattern below, adding to the array.

theImages[0] = '1.gif'
theImages[1] = '2.gif'
theImages[2] = '3.gif'
theImages[3] = '4.gif'

// do not edit anything below this line

var j = 0
var p = theImages.length;
var preBuffer = new Array()
for (i = 0; i < p; i++){
preBuffer[i] = new Image()
preBuffer[i].src = theImages[i]
}
var whichImage = Math.round(Math.random()*(p-1));
function showImage(){
document.write('<img src="'+theImages[whichImage]+'">');
}

// End -->
</script>

in the body:
<script type="text/javascript">
<!-- Begin
showImage();
// End -->
</script>
CLEN
01-16-2008, 05:45 PM
Forgive me if this is a really basic "newbie" question, but how would I use that code? I'm not exactly sure which part of it to manipulate and how to connect this code to the graphics I'd like to use...

thanks for this by the way! if you could just give me a quick and dirty run down on it, i would appreciate it!
dtm32236
01-16-2008, 10:14 PM
here's what you're gonna do:

create a .js file with this in it:

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Begin
// Set up the image files to be used.
var theImages = new Array() // do not change this
// To add more image files, continue with the
// pattern below, adding to the array.

theImages[0] = '1.gif'
theImages[1] = '2.gif'
theImages[2] = '3.gif'
theImages[3] = '4.gif'

// do not edit anything below this line

var j = 0
var p = theImages.length;
var preBuffer = new Array()
for (i = 0; i < p; i++){
preBuffer[i] = new Image()
preBuffer[i].src = theImages[i]
}
var whichImage = Math.round(Math.random()*(p-1));
function showImage(){
document.write('<img src="'+theImages[whichImage]+'">');
}

// End -->

and name it rotate_image.js

the only thing you have to change is:
theImages[0] = '1.gif'
theImages[1] = '2.gif'
theImages[2] = '3.gif'
theImages[3] = '4.gif'

change 1.gif, 2.gif, etc to point to your images


in your html, include this in the <head>:

<script src="rotate_image.js" type="text/javascript">

then, where you want the image rotation within the page, put:

<script type="text/javascript"> <!-- Begin showImage(); // End --> </script>
dtm32236
01-16-2008, 10:16 PM
you should have a noscript to:

<script type="text/javascript"> <!-- Begin showImage(); // End --> </script>
<noscript><img src="1.gif"></noscript>

make that point to one of the images so something still displays if the user has JavaScript disabled.
CLEN
01-18-2008, 02:24 PM
Great, thank you both! I will try that! :)

By the way, there's also a way to do this with flash player. Is it the same idea behind that? Or do you have to make a "slide-show"/"movie" of pictures that just plays? And is the code for that really difficult?
dtm32236
01-21-2008, 06:25 PM
you're a lot better off doing it this way with JavaScript.