Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4

Thread: image captions

  1. #1
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    image captions

    This is the task that I have to do.

    Amend the code so that the appropriate caption is shown for whatever camera image is currently displayed, again as shown in Figure 1. The caption should be in the format ‘Make Model’ as appropriate.
    So for example if the user clicks on ‘ShowImage’ for the Sony r1 camera, the caption under the image should read ‘Sony r1’.

    This is what I have so far:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>COM301 - Php File Handling</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <script type="text/javascript">
    function showImage(imageFileName, Make, Model)
    {
    // get image element
    var theImageElement = document.getElementById("cameraImage");
    // change what image is displayed
    theImageElement.src=imageFileName;
    document.getElementById("imageCaption").innerHTML = make+model;

    }

    </script>
    </head>
    <body>
    <div id="mainContainer">
    <div id="topSection">
    <h1 style="text-align:center; padding-top:20px">COM301 Recipe 7: Camera e-commerce site</h1>
    </div>
    <div id="contentWrapper">
    <div id="contentLeft">
    <p style="text-align:center">Useful Links</p>
    <br />
    <a href="http://www.google.com">Click here for Google</a>
    <br />
    <a href="http://www.bbc.co.uk">Click here for BBC</a>
    <br />
    </div>
    <div id="contentRight">
    <div style="float:right; margin-top:5px; margin-right:5px">
    <img id="cameraImage" src="blank.jpg" /> <br />
    <div style="text-align:center" id="imageCaption"> No Image </div>
    </div>
    <?php

    $fp = fopen("cameras.txt", "r");
    if ($fp != FALSE)
    {

    echo "<table border='2' width='75%' rows='4'>";
    echo "<tr>";
    echo "<th>Make</th>";
    echo "<th>Model</th>";
    echo "<th>Price</th>";
    echo "<th>Rating</th>";
    echo "<th>Stock</th>";
    echo "<th>Image</th>";
    echo "</tr>";

    while (($buffer = fgets($fp)) != FALSE) {
    $buffer=trim($buffer);
    $cameras = explode(',', $buffer);
    echo "<tr>";
    echo "<td align=center>$cameras[0]</td>";
    echo "<td align=center>$cameras[1]</td>";
    echo "<td align=center>$cameras[2]</td>";
    echo "<td align=center>$cameras[3]</td>";
    echo "<td align=center>$cameras[4]</td>";
    echo "<td align=center><input type='button' value='showImage' onClick='showImage(\"$cameras[5]\");'></td>";
    echo "</tr>";

    }
    echo "</table>";

    // close the file
    fclose($fp);
    }


    ?>
    </div>

    </div>
    <div id="footer">
    <a href="http://www.dynamicdrive.com/style/">More CSS layout examples here</a>
    </div>
    </div>
    </body>
    </html>

    Thanks

  • #2
    Banned
    Join Date
    Oct 2012
    Posts
    81
    Thanks
    0
    Thanked 4 Times in 4 Posts
    you haven't posted the error message(s) you are getting.

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,151
    Thanks
    80
    Thanked 4,559 Times in 4,523 Posts
    Look here:
    Code:
    function showImage(imageFileName, Make, Model)
    See that? The function wants you to pass it *THREE* (3) arguments.

    But when you call it here
    Code:
    cho "<td align=center><input type='button' value='showImage' onClick='showImage(\"$cameras[5]\");'></td>";
    you are clearly passing only *ONE* (1) argument to the function.

    What a surprise that you can't use Make and Model in the function.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,151
    Thanks
    80
    Thanked 4,559 Times in 4,523 Posts
    Oh...and there won't be any error message.

    It's perfectly legal to do
    Code:
    document.getElementById("imageCaption").innerHTML = make+model;
    Just that neither make nor model will be defined.

    (And they woudn't be even if you DID pass three values when you called the function. Do you see why? HINT: JavaScript is CASE SENSITIVE.)
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •