Posted by Jonathan N. Little on 01/11/23 11:40

©® wrote:

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


--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

[Back to original message]