Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > I need a caption with my random picture

Reply
Thread Tools

I need a caption with my random picture

 
 
Guest
Posts: n/a
 
      02-20-2006
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[i].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>


 
Reply With Quote
 
 
 
 
dorayme
Guest
Posts: n/a
 
      02-21-2006
In article <(E-Mail Removed)>,
"" <(E-Mail Removed)> 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


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== {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...)

--
dorayme
 
Reply With Quote
 
 
 
 
Jonathan N. Little
Guest
Posts: n/a
 
      02-21-2006
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
 
Reply With Quote
 
Toby Inkster
Guest
Posts: n/a
 
      02-21-2006
©® wrote:

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

--
Toby A Inkster BSc (Hons) ARCS
Contact Me ~ http://tobyinkster.co.uk/contact

 
Reply With Quote
 
Jim Moe
Guest
Posts: n/a
 
      02-21-2006
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.
>

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;".

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Math.random() and Math.round(Math.random()) and Math.floor(Math.random()*2) VK Javascript 15 05-02-2010 03:43 PM
random.random(), random not defined!? globalrev Python 4 04-20-2008 08:12 AM
inserting random photo with caption carolyn HTML 10 01-02-2006 11:14 PM
add caption to picture kenny Computer Support 28 05-23-2005 12:24 AM
MSWord - Unable to drag a picture with caption attached... sinthreck Computer Support 0 10-29-2003 01:06 PM



Advertisments