PDA

Click to See Complete Forum and Search --> : revolving images

joel31
12-29-2002, 02:42 PM
how can a create a page with an image on it, that changes to a different image each time the page is refreshed?
The best example of this (for if you don't understand, like most people, what i'm talking about) would be on www.microcuts.net

enter the english version, and refresh the page a few times, and you'll see that the biggest image changes every time.

joel31
Beach Bum
12-29-2002, 05:25 PM
on way would be to use a randon number generator to select which image to show. it would still be possible for the same image to appear, but less likely. you could also use a cookie to keep track of which number image the person saw last.
joel31
12-30-2002, 12:26 PM
how would i do that?, i mean putting the random number generator into the web page?
thanks so far
jdavia
12-30-2002, 03:51 PM
Adrian J. Moreno, the one who wrote this script cannot be located. So here it is. It is a close match.

<html>

<style>
<!-- A {color: #000080; text-decoration: none}
.body A {color: #000080; text-decoration: none}
.nav A {color: #003300; text-decoration: none}
.navtop A {color: #FFFFFF; text-decoration: none}
//-->
</style>
<title>UNT School of Visual Arts</title>
<script language="javascript">

<!--
//**********************************************
**
**************************
// This script developed by
// Adrian J. Moreno | AMoreno@art.sch.unt.edu | http://people.unt.edu/~ajm0007
// Web Developer | University of North Texas | School of Visual Arts

// All images should be formatted to height and width defined in the <img> tag. Otherwise, the image will be distorted.
// This can be done by resizing the image, increasing the canvas size around the image to spec. dimensions, and filling with the page's background color.
// Make sure that the image's place in the "Pics" array, matches its URL in the "sites" array.
// If you want more than 5 images & URLs, adjust the formula for randomNum.
// ***Make sure to put onLoad="chooseRandomNum()" in with the <body> tag or it won't work at all.

var Pics = new Array("http://www.art.unt.edu/images/art/
Doherty_untitled_02_sova.jpg",
"http://www.art.unt.edu/images/art/03_Brent_
Phelps_sova.jpg",
"http://www.art.unt.edu/images/art/Schol_Euclid.
jpg",
"http://www.art.unt.edu/images/art/wLovell_13_
sova.jpg",
"http://www.art.unt.edu/images/art/JimIsermann02_
sova.jpg")

var sites = new Array("http://www.art.unt.edu/artbase/photo/
doherty/index.html",
"http://www.art.unt.edu/artbase/photo/phelps_b/
index.html",
"http://www.art.unt.edu/artbase/mix_media_3d/
schol_don/index.html",
"http://www.art.unt.edu/galleries/exhibitions/
99_Spring/show2/index.htm",
"http://www.art.unt.edu/galleries/exhibitions/
99_Spring/show1/index.htm")

function chooseRandomNum(){
if (document.images) {
randomNum = Math.floor(((Math.random() * 20)) % 5)
document.thePicture.src = Pics[randomNum]
}
}

function openLink(url) {
location=(sites[randomNum])
}
//**********************************************
*************************************
//-->

</script>
<script LANGUAGE="JavaScript1.2">

<!-- Fixes onresize bug in NS4
NS4 = document.layers;
if (NS4) {
origWidth = innerWidth;
origHeight = innerHeight;
}

function reDo() {
if (innerWidth != origWidth || innerHeight != origHeight)
location.reload();
}

if (NS4) onresize = reDo;
//-->

</script>
</head>

<body bgcolor="#FFFFFF" font color="#FFFFFF" link="#000080" vlink="#000080" alink="#FF0000" background="images/back-bw.gif" onLoad="chooseRandomNum()">

<table border="1" width="600" cellspacing="0" cellpadding="0" height="1">
<tr>
<td valign="top" class="nav" width="151">
</td>
<td valign="top" class="body" width="282"><p align="center">&nbsp;<br>
<a href="javascript:openLink()" onmouseover="self.status='Click for more from
this artist.'; return true" onmouseout="self.status=' ';return true"><img name="thePicture" src="http://www.art.unt.edu/images/art/
mainart.gif" alt="Click for more from this artist." border="2" height="207" width="280"></a></p>

</td>
</tr>
</table>
</body>

</html>
joel31
02-02-2003, 03:23 PM
i don't want to seem ungrateful, but this is really difficult to get to work, as i don't know which parts are needed and which parts are ust the web page it was taken from, and i don't know what to change to use my images with this.
joe(l31)
jdavia
02-02-2003, 11:58 PM
OK here is a completely different one. The section that I show in bold text is where you replace the images with yours. Also the background image way down in the body.


<!doctype html public "-//w3c//dtd html 3.2//en">
<html>
<style>
<!-- A {color: #000080; text-decoration: none}
.body A {color: #000080; text-decoration: none}
.nav A {color: #003300; text-decoration: none}
.navtop A {color: #FFFFFF; text-decoration: none}
//-->
</style>
<title>UNT School of Visual Arts</title>
<script language="javascript">

<!--
//***********************************************************************************
// This script developed by
// Adrian J. Moreno | AMoreno@art.sch.unt.edu | http://people.unt.edu/~ajm0007
// Web Developer | University of North Texas | School of Visual Arts

// All images should be formatted to height and width defined in the <img> tag. Otherwise, the image will be distorted.
// This can be done by resizing the image, increasing the canvas size around the image to spec. dimensions, and filling with the page's background color.
// Make sure that the image's place in the "Pics" array, matches its URL in the "sites" array.
// If you want more than 5 images & URLs, adjust the formula for randomNum.
// ***Make sure to put onLoad="chooseRandomNum()" in with the <body> tag or it won't work at all.

var Pics = new Array("http://www.IMAGENAME-0.jpg",
"http://www.IMAGENAME-1.jpg",
"http://www.IMAGENAME-2.jpg",
"http://www.IMAGENAME-3.jpg",
"http://www.IMAGENAME-4.jpg")


function chooseRandomNum(){
if (document.images) {
randomNum = Math.floor(((Math.random() * 20)) % 5)
document.thePicture.src = Pics[randomNum]
}
}

function openLink(url) {
location=(sites[randomNum])
}
//***********************************************************************************
//-->

</script>
<script LANGUAGE="JavaScript1.2">

<!-- Fixes onresize bug in NS4
NS4 = document.layers;
if (NS4) {
origWidth = innerWidth;
origHeight = innerHeight;
}

function reDo() {
if (innerWidth != origWidth || innerHeight != origHeight)
location.reload();
}

if (NS4) onresize = reDo;
//-->
</script>
</head>
<body bgcolor="#FFFFFF" font color="#FFFFFF" link="#000080" vlink="#000080" alink="#FF0000" background="images/back-bw.gif" onLoad="chooseRandomNum()">

<table border="1" width="600" cellspacing="0" cellpadding="0" height="1">
<tr>
<td valign="top" class="nav" width="151"></td>
<td valign="top" class="body" width="282"><p align="center">&nbsp;<br>
<img name="thePicture" src="http://www.IMAGENAME.gif" alt="" border="2" height="207" width="280"></p>
</td>
</tr>
</table>
</body>
</html>