How to place a random picture with text in Java script?

Question

Hi, I deleted my past question to clarify it a bit. I realized it was a little hard to understand after I posted it.

I've found this script to display a random image every time a user refreshes my website using Java script:

<script type="text/javascript">

var banner = new Array();

banner[0] =

"website where image is hosted"

banner[1] =

"website where image is hosted"

banner[2] =

"website where image is hosted"

banner[3] =

"website where image is hosted"

var random = Math.round(3*Math.random());

document.write('<img style="border: 0;" src="' + banner[random] + '"/>');

</script>

Is it possible to have certain text assigned to each random image? For example, To have each random image have text under them describing whats on the picture.

If so, Can you provide me with the code to do this? I'd really appreciate it!

Answer 1

&lt;script type=&quot;text/javascript&quot;&gt;

var banner = new Array();

var text = new Array();

banner[0] =

&quot;website where image is hosted&quot;;

banner[1] =

&quot;website where image is hosted&quot;;

banner[2] =

&quot;website where image is hosted&quot;;

banner[3] =

&quot;website where image is hosted&quot;;

text[0] =

&quot;label for first image&quot;;

text[1] =

&quot;label for second image&quot;;

text[2] =

&quot;label for third image&quot;;

text[3] =

&quot;label for fourth image&quot;;

var random = Math.round(3*Math.random());

document.write(&#039;&lt;img style=&quot;border: 0;&quot; src=&quot;&#039; + banner[random] + &#039;&quot;/&gt;&lt;br&gt;&#039;+text[random]+&#039;);

&lt;/script&gt;

Answer 2

Try this:

&lt;script type=&quot;text/javascript&quot;&gt;

var banner = caption = [],

random = Math.round(3*Math.random());

banner[0] =

&quot;website where image is hosted&quot;

banner[1] =

&quot;website where image is hosted&quot;

banner[2] =

&quot;website where image is hosted&quot;

banner[3] =

&quot;website where image is hosted&quot;;

caption[0] =

&quot;caption for image 1&quot;

caption[1] =

&quot;caption for image 2&quot;

caption[2] =

&quot;caption for image 3&quot;

caption[3] =

&quot;caption for image 4&quot;;

document.getElementById(

&#039;randomImage&#039;).src

= banner[random];

document.getElementById(

&#039;caption&#039;).appendChild(

document.createTextNode(

caption[random]));

&lt;/script&gt;

Then somewhere in your page insert these tags:

&lt;img id=&quot;randomImage&quot; src=&quot;defaultImage.png&quot; border=&quot;0&quot; /&gt;

&lt;p id=&quot;caption&quot;&gt;Default caption&lt;/p&gt;

(Sorry about all the line breaks, you can remove them if you want. It wouldn&#039;t let me submit it completely because the lines were too long. It should work fine with &#039;em though.)

Answer 3

First, a couple of notes: you should never use Math.round with Math.random unless of course you want the results HEAVILY skewed towards the middle numbers. Math.floor would be the correct choice with Math.random -see my sources below for more info as to why.

Also, you should not use html tags inside the script (in the document.write) as this creates invalid code. To create html elements correctly with javascript, should look in to document.createElement() if you want to create elements from a script. In this case there really seems like no reason to do it that way anyhow, just place the elements (img and p) on the page and alter them with the script. Also, no need for appendChild() or createTextNode() when you can just access the innerHTML. Use a script function in the head and call it with body onload.

Here is an example that will work:

&lt;!DOCTYPE -don&#039;t forget to use one of these!

&lt;head&gt;

&lt;title&gt;&lt;/title&gt;

&lt;script type=&quot;text/javascript&quot;&gt;

function randImgCap()

{

var banner = new Array();

banner[0] =&quot;1_big.gif&quot;

banner[1] =&quot;2_big.gif&quot;

banner[2] =&quot;3_big.gif&quot;

banner[3] =&quot;4_big.gif&quot;;

var caption = new Array();

caption[0] = &quot;1_big.gif&quot;

caption[1] = &quot;2_big.gif&quot;

caption[2] = &quot;3_big.gif&quot;

caption[3] = &quot;4_big.gif&quot;;

random = Math.floor(Math.random() * banner.length);

document.getElementById (&#039;randomImage&#039;).src = banner[random];

document.getElementById (&#039;caption&#039;).innerHTML = caption[random];

}

&lt;/script&gt;

&lt;/head&gt;

&lt;body onload=&quot;randImgCap()&quot;&gt;

&lt;div&gt;

&lt;img src=&quot;1_big.gif&quot; alt=&quot;1_big.gif&quot; width=&quot;700&quot; height=&quot;700&quot; id=&quot;randomImage&quot; /&gt;

&lt;p id=&quot;caption&quot;&gt;1_big.gif&lt;/p&gt;

&lt;/div&gt;

&lt;/body&gt;

&lt;/html&gt;

Note, in my example I left a space after the getElementById and first ( just so yahoo would not drop the code, could take those spaces out.

Also note, it is also better to place the img and p elements on the page rather than using document.write or document.createElement because at least some of what you intended to be displayed will be, if the user has javascript turned off.