|
|||||||
| Graphics Discussion and technical support for creating and editing graphics for the web. |
 |
|
|
Thread Tools | Search this Thread | Rate Thread | Display Modes |
|
#1
12-29-2002, 02:42 PM
|
|||
|
|||
|
revolving images
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 
|
|
#2
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.
|
|
#4
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"> <br> <a href="javascript  penLink()" 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>
|
|
#5
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)
|
|
#6
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"> <br> <img name="thePicture" src="http://www.IMAGENAME.gif" alt="" border="2" height="207" width="280"></p> </td> </tr> </table> </body> </html>
|
|
| Bookmarks |
| Currently Active Users Viewing This Thread: 1 (0 members and 1 guests) | |
| Thread Tools | Search this Thread |
| Display Modes | Rate This Thread |
|
|
Linear Mode
