How to make a onmouseover work in mysql catalog

Question

I'm having difficulty creating a button on my catalog page, the catalog page returns either 8 15 or 20 products from a mysql database so i use a loop to pull each product out of the database, and i need a addtocart button which uses javascript to create an onmouseover effect the code is as follows

echo "<a href=\"catalog.php?buyproduct=$productNumber\" onmouseover=\"document.crt.src='images/addcrt_btn_dn.png'\"
onmouseout=\"document.crt.src='images/addcrt_btn.png'\">
<img src=\"images/addcrt_btn.png\" name=\"crt\" alt=\"Add to cart\" width=\"81\" height=\"24\"> </a>";

it displays the image properly but nothing happens when the mouse is put over the image. I'm guessing that this could be caused because since either 8 15 or 20 of these images are being created, the "name=crt" is throwing the whole thing off, if so how could i fix this?

Any advice would be helpful thank you!

Answer 1

Instead of using the name attribute on the <img>, I would start by recommending you use the id attribute, as follows:

<img id="crt" />

Then you can change the src as follows:

document.getElementById('crt').src = 'images/addcrt_btn_dn.png';

Make sure you properly escape all those quotes properly, or work on generating the content another way (here's an example sticking with the name attribute):

...
?>
<a href="catalog.php?buyproduct=<?php=$productNumber?>" onmouseover="document[crt].src='images/addcrt_btn_dn.png'" onmouseout="document[crt].src='images/addcrt_btn.png'">
<img src="images/addcrt_btn.png" name="crt" alt="Add to cart" width="81" height="24">
</a>
<?php
...