Random rotating images (not slideshow/gallery)

**spellbinder** · 08-08-2008, 05:52 AM

Hi,

I am looking for a script that lets me show a random image (from a selection of about 20 images) for each upload. What I want is the image to change only when the page is refreshed or each time the visitor comes to our site. I don't want the image to change once the page is uploaded. The images don't need to be hyperlinked.

I remember having found such a script on this site many years ago, and it was a simple one. I can't find it now. I will be so grateful if anybody out there could give me a hint.

Thank you.

**rangana** · 08-08-2008, 06:50 AM

This is basic:

HTML Code:

<script type="text/javascript">
/*********Edit values here for your pictures*******************/
var pic1='http:h1.ripway.com/rangana/images/Picture1.png',
pic2='http:h1.ripway.com/rangana/images/Picture2.jpg',
pic3='http:h1.ripway.com/rangana/images/Picture3.jpg',
pic4='http:h1.ripway.com/rangana/images/Picture4.jpg',
pic5='http:h1.ripway.com/rangana/images/Picture5.jpg',
pic6='http:h1.ripway.com/rangana/images/Picture6.jpg',
pic7='http:h1.ripway.com/rangana/images/Picture7.jpg',
pic8='http:h1.ripway.com/rangana/images/Picture8.jpg',
pic9='http:h1.ripway.com/rangana/images/Picture9.jpg';
/***************End of Edit*********************************/

var rangPics=[pic1,pic2,pic3,pic4,pic5,pic6,pic7,pic8,pic9]; // Add all the picture variables in this array.
window.onload=function() { rangRandom=Math.floor(Math.random()*rangPics.length);
document.getElementById('show').innerHTML='<img src="'+rangPics[rangRandom]+'" alt="myimage" style="width:350px;height:300px;">';}</script>
<div id="show" style="text-align:center;width:350px;border:3px double #222;padding:10px;"></div>

I've got only 9 images, you might want to fill it in. Anyway hope that helps.

**spellbinder** · 08-08-2008, 07:05 AM

Thank you so much!

Have a good weekend!

**lancebvs** · 08-08-2008, 04:55 PM

How can I accomplish the same thing but I want the images to link to a certain part of my website?

Thanks!

**rangana** · 08-09-2008, 12:43 AM

What's the link? Will it be the same as the image source? If so, then you could just add highlighted:

Code:

document.getElementById('show').innerHTML='<a href="'+rangPics[rangRandom]+'"><img src="'+rangPics[rangRandom]+'" alt="myimage" style="width:350px;height:300px;"></a>;

If you want different link, please say so, as we might need to modify the script (a little bit).

**lancebvs** · 08-09-2008, 01:08 AM

I want like 3-4 images and each will take the person to a different page.

**rangana** · 08-09-2008, 01:18 AM

This should do it:

HTML Code:

<script type="text/javascript">
var rangPics=[
// Add all the picture variables in this array. First parameter is the image and the second should be the link.
['http:h1.ripway.com/rangana/images/Picture8.jpg','http://www.google.com'],
['http:h1.ripway.com/rangana/images/Picture9.jpg','http://www.dynamicdrive.com'],
['http:h1.ripway.com/rangana/images/Picture7.jpg','http:/www.yahoo.com'],
['http:h1.ripway.com/rangana/images/Picture4.jpg','http://www.lafontana.ca']
];
window.onload=function() { rangRandom=Math.floor(Math.random()*rangPics.length);
document.getElementById('show').innerHTML='<a href="'+rangPics[rangRandom][1]+'" style="border:0px;"><img src="'+rangPics[rangRandom][0]+'" alt="myimage" style="width:350px;height:300px;"></a>';}</script>
<div id="show" style="text-align:center;width:350px;border:3px double #222;padding:10px;"></div>

Hope it helps.

**lancebvs** · 08-09-2008, 01:48 PM

I tried the script and it still does not work:

http://www.stringsdepotplus.com/contest.html

Any ideas how I can get this working?

**rdknott** · 01-30-2010, 08:04 PM

Hi, I am trying to get the rotator to work but having trouble. When I run the script all I see is and x my image here is the page. http://www.porthole.com/porthole/rotate.htm

Thanks for any help you can give me.

rdknott

**vwphillips** · 02-01-2010, 09:28 AM

image http:www.porthole.com/porthole/images/TEST3.jpg does not exist

better

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled 1</title>
</head>

<body>

<script type="text/javascript">
/*********Edit values here for your pictures*******************/

var rangPics=[];
rangPics[0]='http://www.porthole.com/porthole/images/ship1.jpg',
rangPics[1]='http://www.porthole.com/porthole/images/ship8.jpg',
rangPics[2]='http://www.porthole.com/porthole/images/ship2.jpg',
rangPics[3]='http://www.porthole.com/porthole/images/ship7.jpg',
rangPics[4]='http://www.porthole.com/porthole/images/ship5.jpg',
rangPics[5]='http://www.porthole.com/porthole/images/ship9.jpg',
rangPics[6]='http://www.porthole.com/porthole/images/ship4.jpg',
rangPics[7]='http://www.porthole.com/porthole/images/ship3.jpg';


window.onload=function() {
 var rangRandom=Math.floor(Math.random()*rangPics.length);
 document.getElementById('show').src=rangPics[rangRandom];
 }

</script>
<div  style="text-align:center;width:788px;border:1px double #222;padding:10px; height: 223px;">
<img id="show" src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif"  alt="myimage" style="width:788px;height:223px;" />
</div>
</body>

</html>

Thread: Random rotating images (not slideshow/gallery)

Thread Tools

Search Thread

Random rotating images (not slideshow/gallery)

The Following User Says Thank You to rangana For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions