Here's why it's not working:
When you roll over your first link (posters), you send the name of the image to replace to JavaScript imgName variable. Now, Javascript runs, and does its thing. When it goes to replace the image, the image isn't found, and there is no result. Why is the image not found? JavaScript I believe (now) is case sensitive. So "Posters" is not the same as "posters". Notice the difference in the following two lines:
document.Photos.src = photosA.png
document.photos.src = photosA.png
The first is what we currently get, and the second is what we want. So the way to alleviate that problem is this:
Change the name="" definition in the image from $Name to $Label.
$images .= "<a href=\"mg_frame3.php?productsID=".$productsID."\"target=\"mainFrame\" onMouseOut=\"inact('".$Label."')\" onMouseOver=\"act('".$Label."')\"><img src=\"images/buttons/".$Label."B.png\" alt=\"".$Name."\" name=\"".$Label."\" width=\"153\" height=\"35\" border=\"0\"></a>";
// Change the name=\"".$Name."\" to
// name=\"".$Label."\"
// Also, I added an escape to the productsID
// just to make sure that it would work
// properly.
That is only a snippet of your code. If you compare your code, and this, you will see the ONE thing you need to change.
Here's another question. Why are you doing it this way? It seems like you know a little bit about CSS. Why not do the links with CSS rather than Java? CSS holds the ability to change a link based on its current state (active, visited, hover). Why not do something like this in the CSS:
/* CSS Code */
a.menu,
a.menu:link,
a.menu:visited{
background: url('images/banners/backgroundA.png') no-repeat top left;
color: #fff;
font-weight: bold;
text-decoration: none;
}
a.menu:active,
a.menu:hover{
background: url('images/banners/backgroundB.png') no-repeat top left;
color: #fff;
font-weight: bold;
}
Now, your two images would be just the images, NO TEXT. You would write your text like a regular link, which will appear like it's on the photo.
Here's the entire thing:
<html>
<head>
<title>CSS Version</title>
<style type="text/css">
/* CSS Code */
a.menu,
a.menu:link,
a.menu:visited{
background: url('images/banners/backgroundA.png') no-repeat top left;
color: #fff;
font-weight: bold;
text-decoration: none;
}
a.menu:active,
a.menu:hover{
background: url('images/banners/backgroundB.png') no-repeat top left;
color: #fff;
font-weight: bold;
}
</style>
</head>
<body>
<a href="#" class="menu">Posters</a><br>
<a href="#" class="menu">Banners</a><br>
</body>
</html>
Or, if you want to loop through your query to get the names and labels....
<html>
<head>
<title>CSS Version [code=php]</title>
<style type="text/css">
/* CSS Code */
a.menu,
a.menu:link,
a.menu:visited{
background: url('images/banners/backgroundA.png') no-repeat top left;
color: #fff;
font-weight: bold;
text-decoration: none;
}
a.menu:active,
a.menu:hover{
background: url('images/banners/backgroundB.png') no-repeat top left;
color: #fff;
font-weight: bold;
}
</style>
</head>
<body>
<?php
$hostname = "localhost";
$database = "zzz";
$username = "zzz";
$password = "zzz";
$connpt = mysql_pconnect($hostname, $username, $password) or trigger_error(mysql_error(),E_USER_ERROR);
mysql_select_db($database, $connpt);
$sql = "SELECT * FROM megaproducts";
$result = mysql_query($sql, $connpt) or die(mysql_error());
if (mysql_num_rows($result) < 1) {
print "There are no items to display.";
} else {
while($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
$Name = $row['productsName'];
$productsID = $row['productsID'];
$Label = $row['Label'];
echo "<a href=\"mg_frame3.php?productsID=".$productsID."\"target=\"mainFrame\" class=\"menu\">".$Name."</a> ";
}
?>
</body>
</html>
Notice how much cleaner the CSS version is? Use either one. They get you the same result, except that CSS is more widely accepted, and some people may disable JavaScript which could inadvertantly destroy your page.
~Brett
