PDA

Click to See Complete Forum and Search --> : JS to randomly display 3 images

geek_grrrl
02-18-2003, 10:56 PM
Hiya, I want to randomly rotate three images on a page. Specifically, I want to change the postcard on this page http://www.jetsupport.com.au/original/beta/index.html randomly when the page reloads.

I'm hunting for a simple java script to do this.

Is there a script that will achieve this end without the use of server side includes or any other fancy pants means aside from a simple java script?

GG
pyro
02-18-2003, 11:03 PM
Try something like this...

<body>
<script language="javascript" type="text/javascript">
<!--hide

for (i=0; i<100; i++)
{
var x = Math.random()*3

var image1="image1.jpg"
var image2="image2.jpg"
var image3="image3.jpg"

if(x<=1)var image=image1
else if(x<=2)var image=image2
else var image=image3

document.write('<img src='+image+'');

}
//END hide-->
</script>
</body>
geek_grrrl
02-18-2003, 11:15 PM
Thanks legend!

I took your script and put my three image names into this bit:

var image1="image1.jpg"
var image2="image2.jpg"
var image3="image3.jpg"

so now it reads:

var image1="../beta/images/postcard.gif"
var image2="../beta/images/postcard2.gif"
var image3="../beta/images/postcard3.gif"

Then I cut and pasted the whole script into the <body> section of my page. What I get when I'm viewing the page now is multiple instances of the images above at the top of my page, then the normal existing content. Soooo, three quick questions:

(i) did I do the right thing to the script?

(ii) do I need to do anything else to the script?

(iii) how do I tell my page to use the script above rather than telling it to load the first image (<td rowspan="3" colspan="3"><img name="postcard" src="../beta/images/postcard.gif" width="486" height="312" border="0" alt=""></td>) which is what I currently have set up?
pyro
02-18-2003, 11:26 PM
I had a few errors in the code. Guess I should have tested first... Anyway, here is the code that you would use:

<td rowspan="3" colspan="3">
<script language="javascript" type="text/javascript">
for (i=0; i<100; i++)
{
var x = Math.random()*3

var image1="../beta/images/postcard.gif"
var image2="../beta/images/postcard2.gif"
var image3="../beta/images/postcard3.gif"

if(x<=1)var image=image1
else if(x<=2)var image=image2
else var image=image3
}
document.write('<img src='+'"'+image+'"'+' width="486" heigh="312">');
</script>
</td>
geek_grrrl
02-19-2003, 04:56 PM
Wow it totally absolutely worked the first time! How bloody awesome. I'm really really very impressed. Thanks so much!! If you ever need anything - like someone to test one of your sites on a Mac - drop me a line.

In the meantime, you wouldn't want to take a crack at this would you - http://forums.webdeveloper.com/showthread.php?s=&threadid=4501&highlight=context

Kissies
pyro
02-19-2003, 05:29 PM
Originally posted by geek_grrrl
In the meantime, you wouldn't want to take a crack at this would you - http://forums.webdeveloper.com/showthread.php?s=&threadid=4501&highlight=contextAnswered... ;)
geek_grrrl
02-26-2003, 11:57 PM
Everything was swiming along soooo beautifully. The script supplied worked a treat (see http://www.jetsupport.com.au/original/beta/index.html) until my client (polietly - well sort of) informed me that my "book now" button isn't working....

Can anyone help? What I've done is set up my html page so that a java script randomly pulls in one of three images (i.e., postcards). The problem is that inside these images is the "book now" button which needs a hot spot attached (so people can hit the button and jump to another page). I don't know of any way to attach the hotspot to an image (without using html). Is this possible??

If you have an idea I'd love to hear it.

Maybe I should use iframes (3 iframes containing three bits of html - one for each postcard??). The question then is how to change the java script so that the page pulls in iframes rather than images.

I'm in your capable hands.
pyro
02-27-2003, 10:13 AM
Do you want the whole postcard to be the book now link? If so, you will just have to change this line:

document.write('<img src='+'"'+image+'"'+' width="486" heigh="312">');to:

document.write('<a href="booknow.htm"><img src='+'"'+image+'"'+' width="486" heigh="312"></a>');If you don't want that, you will have to make an imagemap...
geek_grrrl
02-27-2003, 06:49 PM
Oh my stars, if I wasn't already pregnant I think I may want to have your child. Thanks you so, so much. You are nothing short of a genius!!
pyro
02-27-2003, 07:06 PM
Glad that's what you were looking for... :D
prairiegirl
02-27-2003, 10:38 PM
Hi Geekgrrrl! I was looking at your website and I noticed that the upper left postcard image shows a border on my browser. I use a PC and Netscape 7whatever. Also, small thing, but the two images to the right of this postcard have a tiny space between them. Where the white postcard corner shows on these images, the tiny line bisects the corner.

Lovely site! No criticism intended, I just thought you might want to know what I'm seeing on my browser. :)

Julie
pyro
02-27-2003, 10:41 PM
The border shows in IE, as well. To remove:

document.write('<a href="booknow.htm"><img src='+'"'+image+'"'+' width="486" heigh="312" border="0"></a>');