image captions

daniel0614 · 11-15-2012, 04:34 PM

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

minder · 11-15-2012, 07:19 PM

you haven't posted the error message(s) you are getting.

Old Pedant · 11-16-2012, 02:44 AM

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.

Old Pedant · 11-16-2012, 02:46 AM

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