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