Member Avatar for laura301019

Hi have this piece of code to display images of cameras and a caption underneath which states what type of camera it is. However I cant get the caption to change, i posted this piece of code before and some responded stating i need to '==' not just one. I have done that and it still isnt working. Anyone else have any idea? should it be cameraImage im comparing to the filename or should it be something else.

<script type="text/javascript">
    function showImage(imageFileName) 
    {
    // get image element
    var theImageElement = document.getElementById("cameraImage");
    // change what image is displayed
    theImageElement.src=imageFileName;  

    if(cameraImage == "Canon_20d.jpg")       
    {
    document.getElementById("imageCaption").innerHTML = "Canon 20d";
    }
    else if(cameraImage == "Fuji_s3Pro.jpg")     
    {
    document.getElementById("imageCaption").innerHTML = "Fuji S3 Pro";
    }
    else if(cameraImage == "Fuji_9500.jpg")      
    {
    document.getElementById("imageCaption").innerHTML = "Fuji 9500";
    }
    else (cameraImage == "sony_r1.jpg")      
    {
    document.getElementById("imageCaption").innerHTML = "Sony r1";
    }
}

}
    </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
                // open a file for reading
                $fp = fopen("cameras.txt", "r");
                if ($fp != FALSE) {
                    // set up the table for structured output
                    echo "<table border='2' width='75%' rows='4'>";
                    echo "<tr><th>Make</th><th>Model</th><th>Price</th><th>Rating</th><th>Stock</th><th>Image</th></tr>";
                    // read the data line by line
                    while (($buffer = fgets($fp)) != FALSE)  {
                        // extract the component parts of the line
                        // remove whitespace
                        $buffer = trim($buffer);

                        $data = explode(',', $buffer);
                        // display the data
                        echo "<tr><td align='center'>$data[0]</td>
                        <td align='center'>$data[1]</td>
                        <td align='center'>$data[2]</td>
                        <td align='center'>$data[3]</td>
                        <td align='center'>$data[4]</td>
                        <td align='center'><input type='button' value='Image' onClick='showImage(\"$data[5]\");'/></td></tr>";  
                    }
                    // close table
                    echo "</table>";
                    // close the file
                    fclose($fp);
                }
            ?>


        </div>
  • 3 Contributors
  • 6 Replies
  • 173 Views
  • 1 Hour Discussion Span
  • Latest Post Latest Post by AleMonteiro
Member Avatar for Traevel

Hi,

In the if-conditions you are comparing an empty variable cameraImage to the camera names, try changing the lines that say:

if(cameraImage == "Canon_20d.jpg")

to

if(imageFileName == "Canon_20d.jpg")

assuming you are passing the same camera image names in function showImage(imageFileName).

Traevel

Member Avatar for laura301019

I tried this myself, now the only caption showing for each image is the last one "Sony r1". Not sure how to fix this, is the if else statement i have wrong?

Member Avatar for Traevel

You are getting the camera image paths from a text file, are they the same as the path names you are comparing with? In other words, is there a $data[5] in the same format as for example Fuji_s3Pro.jpg.

Since the last condition you have is an else, it's not comparing anymore, but just the default end state for your function if all the other checks fail. So the (cameraImage == "sony_r1.jpg") is not applicable in the last else.

Member Avatar for laura301019

Yes the image names i am comparing to are the same as their names in the txt file.

Member Avatar for Traevel

remove the } that's on line 27 of the code you posted.. if I make a dummy text file with a camera name it's working on this end

oh and you might as well remove (cameraImage == "sony_r1.jpg") in the last else statement, it's not doing anything

Edited by Traevel because: else statement
Member Avatar for AleMonteiro

Hi Laura, try this:

function showImage(imageFileName) 
{
    // get image element
    var theImageElement = document.getElementById("cameraImage");
    // get caption element
    var theCaptionElement = document.getElementById("imageCaption");
    // change what image is displayed
    theImageElement.src=imageFileName;  

    // Set the name to lower case to make an case insensitive comparison
    imageFileName = imageFileName.toLowerCase();

    if(imageFileName == "canon_20d.jpg")       
    {
        theCaptionElement.innerHTML = "Canon 20d";
    }
    else if(imageFileName == "fuji_s3pro.jpg")     
    {
        theCaptionElement.innerHTML = "Fuji S3 Pro";
    }
    else if(imageFileName == "fuji_9500.jpg")      
    {
        theCaptionElement.innerHTML = "Fuji 9500";
    }
    else if (imageFileName == "sony_r1.jpg")      
    {
        theCaptionElement.innerHTML = "Sony r1";
    }
}

Hope it helps.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.