I need a caption with my random picture

Discussion in 'HTML' started by ©®, Feb 20, 2006.

  1. ©®

    ©® Guest

    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>
    ©®, Feb 20, 2006
    #1
    1. Advertising

  2. ©®

    dorayme Guest

    In article <>,
    "©®" <> 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==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...)

    --
    dorayme
    dorayme, Feb 21, 2006
    #2
    1. Advertising

  3. ©® 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
    Jonathan N. Little, Feb 21, 2006
    #3
  4. ©®

    Toby Inkster Guest

    ©® 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
    Toby Inkster, Feb 21, 2006
    #4
  5. ©®

    Jim Moe Guest

    ©® 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)
    Jim Moe, Feb 21, 2006
    #5
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. carolyn
    Replies:
    10
    Views:
    791
    dorayme
    Jan 2, 2006
  2. Replies:
    13
    Views:
    676
    Moses
    Apr 23, 2007
  3. globalrev
    Replies:
    4
    Views:
    742
    Gabriel Genellina
    Apr 20, 2008
  4. Replies:
    8
    Views:
    1,220
    Mick White
    Apr 19, 2005
  5. VK
    Replies:
    15
    Views:
    1,119
    Dr J R Stockton
    May 2, 2010
Loading...

Share This Page