PDA

View Full Version : Image not changing on element id src



Rockonmetal
05-29-2008, 02:41 AM
I am a total noob when it comes to javascript. I made parts of the script (onclick). And the Element id.
The probably is that the script is not changing the product picture on the page when a new color is selected.
Heres the code *brace yourself*


<html>
<head>
<script type="text/javascript">
function myfunction(txt)
{
alert(txt);
document.getElementById("productpicture").src=(txt);

}
</script>
<!--The alert has told me that my function is correctly reading back. But it is not changing the image... -->
</head>
<body>
<?php
if(isset($_GET['id'])){
$con = mysql_connect("localhost","TOPSECRET","NOTHINGTOSEEMOVEALONG");
if (!$con)
{
include("error.php");// I need to make the error.php page
die('<br />Uh, there is a problem. The problem\'s error code is:' . mysql_error());
}
mysql_select_db("*IT WORKS*", $con);

$result = mysql_query("SELECT * FROM products WHERE id='$_GET[id]'");

while($row = mysql_fetch_array($result))
{
echo '<table id="spotlight"><tr><td colspan="3">';
echo $row['name'];
echo "</td>";
echo "</tr>";
echo "<tr>";
if(file_exists("pi/" . $row['id'] . ".png")){
echo '<td rowspan="5"><img src="pi/' . $row["id"] . '.png" /></td>';
}else{
echo '<td rowspan="5"><img src="pi/nopicture.png" id="productpicture" /></td>';
}
echo '<td colspan="2">' . $row["description"] . '</td>';
echo '</tr>';
echo '<tr>';
echo '<td>Size: </td>';
echo '<td>' . $row["size"] . '</td>';
echo '</tr>';
echo '<tr>';
echo '<td>Weight: </td>';
echo '<td>' . $row["weight"] . ' lb</td>';
echo '</tr>';
echo '<tr>';
echo '<td>Price:</td>';
echo '<td>' . $row["price"] . '</td>';
echo '</tr>';
echo "<tr>";
echo '</table>';
echo '<table>';
echo '<tr>';
$colors = str_replace(", ",".png ",$row['colors']);
$newColors = explode(" ", $colors);
$countColors = count($newColors);// This works
$i = 0;
while($i<$countColors){
echo '<td>';
echo "<img src='pi/" . $row['id'] . "/" . $newColors[$i]. "' onclick='myfunction(\"pi/" . $row['id'] . "/" . $newColors[$i]. "\")' border='0'/>";
echo $newColors[$i];
echo '</td>';
$i++;
}
echo '</tr>';
echo '</table>';
}
mysql_close(); // But I want it open...
}

?>
</body>
</html>

I think the problem is with the element id thing... where the src is... I don't think I put it in there correctly...
Thanks for the help

rangana
05-29-2008, 02:53 AM
Have you tried debugging if the image really exist.
Try placing the output of this:


"pi/" . $row['id'] . "/" . $newColors[$i]. "\"


in replacement of txt:


document.getElementById("productpicture").src=(txt);


Also, what's the extension?...is it included in the #newColors[$i]? :)

Rockonmetal
05-29-2008, 09:07 PM
The image does work and it does have an extension (.png) which is given to each of the elements in the variable...
Basically it comes from the database as:

red, green, yellow,
Then I add the extensions by finding the commas:

red.png green.png yellow.png
Then split it into an array:

array("red.png", "green.png", "yellow.png");
Then I display it...
That all works... its just not changing the main picture (id="productpicture).

So the extension is included in the newColors[$i] and the images do show up. The reason why I don't just put a separate function for each product because I will be constantly adding new products or colors to the database. So instead of having to make a new function every time I add a new product or it comes out in a new color. I can just add the product/color and upload the image to the database. have it so it dynamic (it has a template and puts the information put in based on which image is listed).

So what should I put in that getElementid line If I want to have the function work based on what its given?

Thanks upfront

rangana
05-30-2008, 12:07 AM
You're code (should) work fine (for me).

I try reproducing your problem, of course without a database, and the picture changes every click. My apologies, but I can't be of any help.

Let's just wait for other members to help you out with this. Possibly Nile, he's got good PHP foundation.