Click to See Complete Forum and Search --> : random image java script


hmg
10-13-2003, 03:52 PM
I am currently using the following script to rotate 3 graphics on my home page. i would like to be able to link to 3 different places, depending on which image is active. i tried defining the links in fireworks, but when i exported and loaded, the link didn't work. any ideas???

<HEAD>

<SCRIPT LANGUAGE="JavaScript">

<!-- 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'

// 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>

</HEAD>



THE FOLLOWING IS COPIED INTO THE BODY OF MY PAGE:

<BODY>

<SCRIPT LANGUAGE="JavaScript">

<!-- Begin
showImage();
// End -->
</script>

Dimitri
10-13-2003, 04:54 PM
If I've understood you correctly, try this:

<HTML>
<HEAD>
<SCRIPT LANGUAGE="javascript">
<!--
&nbsp;&nbsp;&nbsp;&nbsp;var j = 0;
&nbsp;&nbsp;&nbsp;&nbsp;var p = theImages.length;
&nbsp;&nbsp;&nbsp;&nbsp;var preBuffer = new Array();
&nbsp;&nbsp;&nbsp;&nbsp;var whichImage = Math.round(Math.random() * (p-1));

&nbsp;&nbsp;&nbsp;&nbsp;var theImages = new Array();
&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;theImages[0] = new Array("1.gif", "http://www.foo1.com");
&nbsp;&nbsp;&nbsp;&nbsp;theImages[1] = new Array("2.gif", "http://www.foo2.com");
&nbsp;&nbsp;&nbsp;&nbsp;theImages[2] = new Array("3.gif", "http://www.foo3.com");

&nbsp;&nbsp;&nbsp;&nbsp;for (i = 0; i < p; i++){
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;preBuffer[i] = new Image();
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;preBuffer[i].src = theImages[i];
&nbsp;&nbsp;&nbsp;&nbsp;}

&nbsp;&nbsp;&nbsp;&nbsp;function showImage() {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.write('<a href="'+theImages[whichImage][1]+'"><img src="'+theImages[whichImage][0]+'"></a>');
&nbsp;&nbsp;&nbsp;&nbsp;}
//-->
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="javascript">
<!--
&nbsp;&nbsp;&nbsp;&nbsp;showImage();
//-->
</SCRIPT>
</BODY>
</HTML>

Cheers.
Dimitri

hmg
10-13-2003, 05:49 PM
thank you dimitri... i'm still having problems. i cut and pasted your code and filled in the names of my files and their websites. when i went to preview, the whole space was empty. so somehow now it's not calling up the images...

thank you for your help, any other ideas? or any suggestions on different ways to accomplish this?

thank you!!

Dimitri
10-13-2003, 06:19 PM
Works fine for me. Are you importing this into Fireworks or something? Maybe that's the problem.

Can you give me a link, online, where I can check it out and see if I can spot the problem?

Dimitri

hmg
10-14-2003, 09:57 AM
hi dimitri, thanks for your help on this. i put just the photos up on one of my servers.
go to

http://www.d2m2.com/test/home.htm

when i go there, nothing comes up, but you can go to source and see how i did it. the issue with nothing showing up is exactly the problem i'm having on the website i'm working on.

i can get it to work if i don't want to link each photo somewhere... but i want each picture to go to different websites. fyi, i'm doing it in Dreamweaver.

can you spot what i'm doing wrong?

thank you so much!

Dimitri
10-14-2003, 10:39 AM
I'm SO sorry. This line:
var theImages = new Array();

should be ABOVE this line of code:
var p = theImages.length;

Also, I've noticed some very strange characters when I did a 'view source' on your page. I found these characters on the line just underneath " var theImages = new Array();":
нннн

Delete that garbage as well.

Dimitri

hmg
10-14-2003, 11:34 AM
hi dimitri,
okay, i moved that line. i noticed the wierd looking "y"s too, but they seemed to only show up in the front of a line where there were spaces. i think i got them all out now.

after moving the line, it is still not working for me. does it come up for you??

Dimitri
10-14-2003, 12:29 PM
The gibberish still appears, but now it's at the end of this line:
var whichImage = Math.round(Math.random() * (p-1)); нн

Notice the "нн" at the end of the line.

How are you uploading these files to the server? Are you uploading them as plain/text ascii or binaries?

These characters are not normal, and since you aren't adding them in, I can only assume that one of the programs that you are using to edit or upload your HTML page is misconfigured and added them in.

Check the configuration of these programs.

Dimitri

hmg
10-14-2003, 12:37 PM
i upload using fetch... okay, WE'RE MAKING PROGRESS :)

hmg
10-14-2003, 12:38 PM
oops, i hit return before i finished. now the 1st image comes up, and it's linked, but the other 2 do not show up. we're so close, thank you so much for your help, dimitri. i really appreciate it!

Dimitri
10-14-2003, 01:31 PM
Dude...
Are you trying to rotate the images after a certain interval?

See... you didn't specify that...... at all, if that's the case. (And I'm still not sure that this is even what you're trying to do. I'm just guessing.)

I'm not upset (well... yet, anyway. hehe)

It's just that if I'm donating my time in order to help you, so you need to do your part by being clear about what exactly you want help ON.

Because, right now... like I said... you're forcing me to just guess.
Dimitri

hmg
10-14-2003, 01:52 PM
I AM SO SORRY... i thought the code i pasted originally "random images" was saying what i was trying to do... but now i realize i was unclear. i'm sorry. yes, i want the images to rotate. not in intervals, just on refresh. so every time a person goes to the site, or hits refresh, the images rotate.

an example is at www.sandiego.org

on the right side, if you hit refresh, the hotels alternate. so that 10 or 12 hotels can advertise in a spot that only has room for 4.

again, i'm sorry... i'm obviously not really skilled with java script... still learning.

oh, and i'm a dudette :)

hmg
10-14-2003, 04:29 PM
hi dimitri,

i just moved the images up a few lines and it works. you were such a big help, thank you so much. now, i just need to figure out how to make it open in a new window when they click on the image. i assume it's going to be a target, just not sure where to put it. if you know, that would be helpful... i am very thankful for all your assistance.

<SCRIPT LANGUAGE="javascript">
<!--
var j = 0;
var theImages = new Array();
theImages[0] = new Array("home1.gif", "http://www.algonquinhotel.com/index2.html");
theImages[1] = new Array("home2.gif", "http://www.gardenstreetinn.com");
theImages[2] = new Array("home3.gif", "http://www.radisson.com/sandiegoca");
var p = theImages.length;
var preBuffer = new Array();
var whichImage = Math.round(Math.random()*(p-1));
for (i = 0; i < p; i++){
preBuffer[i] = new Image();
preBuffer[i].src = theImages[i];
}
function showImage() {
document.write('<a href="'+theImages[whichImage][1]+'"><img src="'+theImages[whichImage][0]+'"></a>');
}
//-->
</SCRIPT>

Dimitri
10-14-2003, 04:42 PM
change:
document.write('<a href="'+theImages[whichImage][1]+'"><img src="'+theImages[whichImage][0]+'"></a>');

to:
document.write('<a href="'+theImages[whichImage][1]+'" target="_blank"><img src="'+theImages[whichImage][0]+'"></a>');

Cheers!
D

Dimitri
10-14-2003, 04:51 PM
Calling you "dude" was presumptuous of me. Sorry.

Though in all fairness to me... I call everyone "dude"... even my female friends and relatives :)

Cheers!
Dimitri

hmg
10-14-2003, 06:04 PM
thanks dude! you were so helpful to me. i really appreciate it. i've got it all working fine now. www.tripsfortwo.com is the site i've been building. these files rotate on the home page :)

thanks again for your help, and patience!