Random Linked Image + matching text

[Falah]

This is what I have so far:

<script language="JavaScript">
<!-- Hide from old browsers

var imagenumber = 9 ;
var randomnumber = Math.random() ;
var rand1 = Math.round( (imagenumber-1) * randomnumber) + 1 ;
images = new Array
images[1] = "images/random/01.gif"
images[2] = "images/random/02.gif"
images[3] = "images/random/03.gif"
images[4] = "images/random/04.gif"
images[5] = "images/random/05.gif"
images[6] = "images/random/06.jpg"
images[7] = "images/random/07.gif"
images[8] = "images/random/08.gif"
images[9] = "images/random/09.jpg"
var image = images[rand1]


links = new Array
links[1] = "updates/01.htm"
links[2] = "updates/02.htm"
links[3] = "updates/03.htm"
links[4] = "updates/04.htm"
links[5] = "updates/05.htm"
links[6] = "updates/06.htm"
links[7] = "updates/07.htm"
links[8] = "updates/08.htm"
links[9] = "updates/09.htm"
var link = links[rand1]

var Quotation=new Array() 


Quotation[1] = "Image Text 1";
Quotation[2] = "Image Text 2";
Quotation[3] = "Image Text 3";
Quotation[4] = "Image Text 4";
Quotation[5] = "Image Text 5";
Quotation[6] = "Image Text 6";
Quotation[7] = "Image Text 7";
Quotation[8] = "Image Text 8";
Quotation[9] = "Image Text 9";


var Q = Quotation.length;
var whichQuotation=Math.round(Math.random()*(Q-1));
function showQuotation(){document.write(Quotation[whichQuotation]);}
showQuotation();



document.write('<A HREF="' + link + '"><IMG SRC="' + image + '" border="0"></a>')

</script>

It pretty much works as is, BUT, I want it to display lets say Quotation 9 with Image 9 (image 9 is linked to 09.htm) but right now it's putting just any of the 9 phrases.

[pman]

Just modify your showQuotation function. Right now, it's displaying the quotes only. You can add another line to show the appropriate image. This should do it:

function showQuotation()
{
document.write(Quotation[whichQuotation]);
document.write("<IMG SRC='" + images[whichQuotation] + "' border='0'>") ;
}

[Falah]

It works great but, I want to have the text separate from the image (in another table all together) Do you know any way I could do something like...

Will be in the table where the image should be displayed:

<script language="JavaScript" type="text/JavaScript">

var imagenumber = 9 ;
var randomnumber = Math.random() ;
var rand1 = Math.round( (imagenumber-1) * randomnumber) + 1 ;


images = new Array
images[1] = "images/random/c/01.gif"
images[2] = "images/random/c/02.gif"
images[3] = "images/random/c/03.gif"
images[4] = "images/random/c/04.gif"
images[5] = "images/random/c/05.gif"
images[6] = "images/random/c/06.jpg"
images[7] = "images/random/c/04.gif"
images[8] = "images/random/c/05.gif"
images[9] = "images/random/c/06.jpg"
var image = images[rand1]

links = new Array
links[1] = "updates/01.htm"
links[2] = "updates/02.htm"
links[3] = "updates/03.htm"
links[4] = "updates/04.htm"
links[5] = "updates/05.htm"
links[6] = "updates/06.htm"
links[7] = "updates/04.htm"
links[8] = "updates/05.htm"
links[9] = "updates/09.htm"
var link = links[rand1]

var Quotation=new Array() 

Quotation[1] = "Don't let this happen to you!";
Quotation[2] = "Nice tractor with a white background";
Quotation[3] = "This cylinder has water drops on it!";
Quotation[4] = "A simple hose.";
Quotation[5] = "Get OUT OF THE WAY!";
Quotation[6] = "Heavy Duty<br>Hydraulic Hoses &amp; V-Belts for Caterpillar Equipment";
Quotation[7] = "A simple hose.";
Quotation[8] = "Get OUT OF THE WAY!";
Quotation[9] = "Heavy Duty<br>Hydraulic Hoses &amp; V-Belts for Caterpillar Equipment";

document.write('<A HREF="' + link + '"><IMG SRC="' + image + '" border="0"></a>')

</script>

Will be in the table where the text will be displayed:

<script language="JavaScript" type="text/JavaScript">

var Q = Quotation.length;
var whichQuotation=Math.round(Math.random()*(Q-1));
function showQuotation(){document.write(Quotation[whichQuotation]);}
showQuotation();

</script>

[pman]

I don't recommend anyone to use document.write. My suggestion is that use dom's innerHTML.

for example, when you say

document.getElementById("id1").innerHTML = "Quotation: " + Quotation[whichQuotation] ;
document.getElementById("id2").innerHTML = "<IMG SRC='" + images[whichQuotation] + "' border='0'>" ;

now, when you load your page, the quotation and the image will be displayed wherever your html elements named id1 and id2 are.

document.write, as the name says, writes the content one after another. plus, it'll replace all the contents if you use this method after your page has loaded.

P.S: I was kinda confused at the beginning. I think you are separating your scripts and placing them into different tables. There's no need for that. You can have it all in and place it in an external file.

[camilia]

Hello !
I'm using your wonderful code Pman and Falah. I have Image+Quotation+Link and it works great. But once and a while (let's say, every 5 times you refresh your page, but it's really random), i get an "undefined" error where Image+Quotation usually appear. Link still works well.

I did not have this error with Falah's first code, but i want the Quotation with the appropriate image too... It seems that this part causes the problem:

<script language="JavaScript" type="text/JavaScript">

var Q = Quotation.length;
var whichQuotation=Math.round(Math.random()*(Q-1));
function showQuotation(){document.write(Quotation[whichQuotation]);}
showQuotation();

</script>

... but i really am a beginner in all that, and i can't find anything to make this work

Here is my code:

<table>
<tr>
<td width="140" valign="middle">

<script language="JavaScript">

var imagenumber = 5 ;
var randomnumber = Math.random() ;
var rand1 = Math.round( (imagenumber-1) * randomnumber) + 1 ;


images = new Array
images[1] = "./imagesrandom/1.jpg";
images[2] = "./imagesrandom/2.jpg";
images[3] = "./imagesrandom/3.jpg";
images[4] = "./imagesrandom/4.jpg";
images[5] = "./imagesrandom/5.jpg";

var image = images[rand1] ;


links = new Array
links[1] = "./galerie/1.html";
links[2] = "./galerie/2.html";
links[3] = "./galerie/3.html";
links[4] = "./galerie/4.html";
links[5] = "./galerie/5.html";

var link = links[rand1] ;

var Quotation = new Array() ;


Quotation[1] = "Applique multicolore L 65 cm <br><br> <font color=#666666>Prix TTC: 345 Euros</font>";
Quotation[2] = "Luminaire Orange H 65 cm <br><br> <font color=#666666>Prix TTC: 575 Euros</font>";
Quotation[3] = "Totem H 165 cm <br><br> <font color=#666666>Prix TTC: 1575 Euros</font>";
Quotation[4] = "Panneau sail H 70 cm <br><br> <font color=#666666>Prix TTC: 1200 Euros</font>";
Quotation[5] = "Lampe de table Fohen H 65 cm <br><br> <font color=#666666>Prix TTC: 575 Euros</font>";

</script></td></tr>


<tr>
<td valign="bottom" width="140"><font face="Arial, Helvetica, sans-serif" size="2" align="justify" color="#CC6600"> 
      <script language="JavaScript">var Q = Quotation.length;
var whichQuotation=Math.round(Math.random()*(Q-1));
function showQuotation()
{
document.write("<IMG SRC='" + images[whichQuotation] + "' width='100' border='0'><br>") ;
document.write(Quotation[whichQuotation]);
}
showQuotation();</script></font> 
</td></tr>

<tr>
<td width="140"><script language="JavaScript">document.write('<A HREF="' + link + '"><IMG SRC="images/details.gif" align="center" border="0"></a>')</script></td></tr>

</table>

Have you got an idea ?
Thank you very much for your help and sorry for my english

[Bornfree]

Hi Guys,

I'm trying to get the random image with matching text and link to work together but i can't.

I can get the image and text and i can get image and link. but not all three. can someone please help me out here?

Thanks in advance