I need a caption with my random picture

[©®]

I am using a script to generate a random picture on a friend's personal
website. It changes whenever refreshed.
Below the picture, you will see text. At the moment the text stays the
same because it is just html below the photo.
Ideally I would like the caption to be relevant to the picture but I
actually have no idea how to do it.
Anyone care to lend a hand and help?
Thanks
The site is www.vorsters.com
The code for changing the picture is:

<script language="JavaScript" type="text/JavaScript">
var j,l="",m="",p="",q="",z="",list= new Array()
list[list.length]='images/potd/potd01.jpg?&alt=Picture Of The
Day&border=1&link=index.htm';
list[list.length]='images/potd/potd02.jpg?&alt=Picture Of The
Day&border=1&link=index.htm';
list[list.length]='images/potd/potd03.jpg?&alt=Picture Of The
Day&border=1&link=index.htm';
list[list.length]='images/potd/potd04.jpg?&alt=Picture Of The
Day&border=1&link=index.htm';
list[list.length]='images/potd/potd05.jpg?&alt=Picture Of The
Day&border=1&link=index.htm';
list[list.length]='images/potd/potd06.jpg?&alt=Picture Of The
Day&border=1&link=index.htm';
list[list.length]='images/potd/potd07.jpg?&alt=Picture Of The
Day&border=1&link=index.htm';
list[list.length]='images/potd/potd08.jpg?&alt=Picture Of The
Day&border=1&link=index.htm';
list[list.length]='images/potd/potd09.jpg?&alt=Picture Of The
Day&border=1&link=index.htm';
list[list.length]='images/potd/potd10.jpg?&alt=Picture Of The
Day&border=1&link=index.htm';
list[list.length]='images/potd/potd11.jpg?&alt=Picture Of The
Day&border=1&link=index.htm';
list[list.length]='images/potd/potd12.jpg?&alt=Picture Of The
Day&border=1&link=index.htm';
list[list.length]='images/potd/potd13.jpg?&alt=Picture Of The
Day&border=1&link=index.htm';
list[list.length]='images/potd/potd14.jpg?&alt=Picture Of The
Day&border=1&link=index.htm';
list[list.length]='images/potd/potd15.jpg?&alt=Picture Of The
Day&border=1&link=index.htm';
list[list.length]='images/potd/potd16.jpg?&alt=Picture Of The
Day&border=1&link=index.htm';
list[list.length]='images/potd/potd17.jpg?&alt=Picture Of The
Day&border=1&link=index.htm';
j=parseInt(Math.random()*list.length);
j=(isNaN(j))?0:j;
if (list[j].indexOf('?')==-1) {
document.write("<img src='"+list[j]+"'>");
}
else {
nvp=list[j].substring(list[j].indexOf('?')+2).split('&');
for(var i=0;i<nvp.length;i++) {
sub=nvp.split('=');
switch(sub[0]) {
case 'link':
l="<a href='"+unescape(sub[1])+"'>";
p="</a>";
break;
case 'target':
q=" target='"+unescape(sub[1])+"'";
break;
default:
m+=" "+sub[0]+"='"+unescape(sub[1])+"'";
break;
}
}
z=(l!="")?((q!="")?l.substring(0,l.length-1)+q+">":l):"";
z+="<img
src='"+list[j].substring(0,list[j].indexOf('?'))+"'"+m+">"+p;
document.write(z);
}
</script>

 

[dorayme]

I am using a script to generate a random picture on a friend's personal
website. It changes whenever refreshed.
Below the picture, you will see text. At the moment the text stays the
same because it is just html below the photo.
Ideally I would like the caption to be relevant to the picture but I
actually have no idea how to do it.
Anyone care to lend a hand and help?
Thanks

I answered a very similar question once before, where is that
brilliant answer? OK just a mo...

Here it is, I made this myself once so there is probably more
professional, but it seemed to work well and my client was happy.
(Irrelevant, I persuaded him to drop it after a while!).

In the head I had:

<script language="JavaScript">
<!-- Hide this script from old browsers --
var random = Math.random() ;
var picnum = Math.round(random*9)+1;

// -- End Hiding Here -->
</script>

In the body i had:

<script language="JavaScript">
<!-- Hide this script from old browsers --
document.write('<img src=pic'+picnum+'.jpg>')
document.write('<br />')

if (picnum==1) {document.write("<blockquote>Site visit to a
province in China to assess a plant for making waste plastic into
synthetic diesel fuel, which was tested on the spot in an
all-purpose vehicle</blockquote>")}

if (picnum==2) {document.write("<blockquote>Client inspects
operation of vortex in hydrocyclone wax melting tank during
development stages using water<blockquote>")}


if (picnum==3) {document.write("<blockquote>Troubleshooting at an
oil refinery beset by poor performance. Problems were found to
be related to certain processing procedures that were in need of
review. The task of connecting cause to effect, included
appreciation of the colloidal properties of oil, water and
surfactant together with distillation tower
operation<blockquote>")}

if (picnum==4) {document.write("<blockquote>Vertical view of
vortex in hydrocyclone wax melting tank using water. A
horizontal acrylic plate, referred to as a vortex bearing was
placed immediately below the liquid level in order to prevent air
from funneling down and entering the pump beneath the tank. In
operation, the hydrocylone was fed with wax lumps that remained
at the tank wall until melted. Thus only liquid wax entered the
pump<blockquote>")}

if (picnum==5) {document.write("<blockquote>Visit to Western
Mining's operations at Olympic Dam to scope WAD's role in
supervising a student research project on optimisation of
flotation<blockquote>")}

if (picnum==6) {document.write("<blockquote>Section of
wax-emulsion plant showing wax melter and heat pump either side
of dividing wall<blockquote>")}

if (picnum==7) {document.write("<blockquote>Heat exchanger bonnet
exhibiting the effect of severe water hammer. A slug of water
was propelled by high pressure gas being suddenly admitted to the
exchanger<blockquote>")}

if (picnum==8) {document.write("<blockquote>Data logging output
from SN2's own high-pressure, high-temperature continuous-flow
plant, during critical tuning using the Ziegler-Nichols method.
Black upper: temperature (deg C) in the molten-metal feed heater.
Green: temperature of feed entering reactor. Purple: Reactor exit
temperature. Cyan: feed temperature exit heat exchanger. Brown:
Heater output (%)<blockquote>")}

if (picnum==9) {document.write("<blockquote>Results of in-house
research using SN2's high-temperature high-pressure plant.
Progressive treatment of wastewater showing (L to R) waste as
supplied, after first and second treatment stages (in
duplicate)<blockquote>")}

if (picnum==10) {document.write("<blockquote>Section of a failed
plate-fin heat exchanger under UV illumination, showing deposits
of refrigerant oil as a pale yellow stain. This presence of this
material suggested a mode of failure in which the refrigerant
level changed abruptly leading to thermal shock.<blockquote>")}

if (picnum==11) {document.write("This is 11")}

if (picnum==12) {document.write("This is 12")}


// -- End Hiding Here -->
</script>

And, of course, you must name the pic files pic1.jpg, pic2.jpg
and put them at the same level as the html (or alter things about
so you don't have to...)

 

[Jonathan N. Little]

I am using a script to generate a random picture on a friend's personal
website. It changes whenever refreshed.
Below the picture, you will see text. At the moment the text stays the
same because it is just html below the photo.
Ideally I would like the caption to be relevant to the picture but I
actually have no idea how to do it.
Anyone care to lend a hand and help?
Thanks
The site is www.vorsters.com
The code for changing the picture is:

<snip code>

Well if your insist using JavaScript rather than a server-side solution
which would be preferable here is a quick and dirty OOP example

<script type="text/javascript">
function Pix(){ //constructor
this.items=new Array;
this.add=addPix;
this.get=getPix;
}

function addPix(pixURL,pixCaption){ //method to add record
var rec=new Object;
rec.url=pixURL;
rec.cap=pixCaption;
var itemCount=this.items.length;
this.items[itemCount]=rec;
}

function getPix(){ //method to get record
var itemCount=this.items.length;
var idx=Math.round(Math.random()*(itemCount-1));
var rec=this.items[idx];
var buf='<img src="' + rec.url + '" alt="Picture of the Day">';
buf+='<div>' + rec.cap + '</div>';
return buf;
}

var potd=new Pix; //create your list
potd.add('potd01.jpg','Caption for first image');
potd.add('potd02.jpg','Caption for second image');
potd.add('potd03.jpg','Caption for third image');
....

then in your document

<script type="text/javascript">document.write(potd.get());</script>

 

[Toby Inkster]

list[list.length]='images/potd/potd01.jpg?&alt=Picture Of The
Day&border=1&link=index.htm';

Replace with:

list[list.length]='images/potd/potd01.jpg?&alt=Picture Of The
Day&border=1&link=index.htm&cap=Caption of the day';

case 'target':
q=" target='"+unescape(sub[1])+"'";
break;

Add here:

case 'cap':
cap+=sub[1];
break;

z+="<img
src='"+list[j].substring(0,list[j].indexOf('?'))+"'"+m+">"+p;
document.write(z);

Add here:

document.write("<div id=cap>"+cap+"</div>");

Better yet, use a server-side script.

 

[Jim Moe]

I am using a script to generate a random picture on a friend's personal
website. It changes whenever refreshed.
Below the picture, you will see text. At the moment the text stays the
same because it is just html below the photo.
Ideally I would like the caption to be relevant to the picture but I
actually have no idea how to do it.

Use a backend store like a flat file, database, or even a Javascript
array, to list all the info about available images to pick: name, height,
width, caption, title, alt text, etc.
Then use a random selection to pick the data group and write it to the page.
BTW: You should replace "&" in the URLs with "&amp;".