mouseonclick question

[1959mvp]

I am trying to modify a navigation bar that is currently utilizing mouseover and mouseout events. I would like to add mouseonclick event to change a tab to a different color when clicked, so that the user can remember which tab has been clicked. Is it possible to use the mouseonclick to do this?
Any help clarifying or explaining would be appreciated.

Here is the current code:

<td width="23%"><a href="index.asp?PageAction=VIEWCATS&Category=20" onMouseOver="MM_swapImage('Image2','','Images/assets/tabs/bogeywearON.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="Images/assets/tabs/bogeywear.gif" alt="Wearables" name="Image2" width="103" height="45" border="0" id="Image2"></a></td>
<td width="24%"><a href="index.asp?PageAction=VIEWCATS&Category=25" onMouseOver="MM_swapImage('Image3','','Images/assets/tabs/bogeygearON.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="Images/assets/tabs/bogeygear.gif" alt="Playables" name="Image3" width="104" height="45" border="0" id="Image3"></a></td>
<td width="15%"><a href="index.asp?PageAction=VIEWCATS&Category=26" onMouseOver="MM_swapImage('Image4','','Images/assets/tabs/sponsorsignsON.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="Images/assets/tabs/sponsorsigns.gif" alt="Drinkables" name="Image4" width="206" height="45" border="0" id="Image4"></a></td>
<td width="30%"><a href="index.asp?PageAction=VIEWCATS&Category=13" onMouseOver="MM_swapImage('Image5','','Images/assets/tabs/prizepacksON.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="Images/assets/tabs/prizepacks.gif" alt="Prize Packs" name="Image5" width="104" height="45" border="0" id="Image5"></a></td>
<td width="8%"><a href="index.asp?PageAction=Custom&ID=119" onMouseOver="MM_swapImage('Image6','','Images/assets/tabs/giftcardsON.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="Images/assets/tabs/giftcards.gif" alt="Gift Cards" name="Image6" width="103" height="45" border="0" id="Image6"></a></td>


I would like to modify this to have the tab maintain a different color on click, helping the user remember where they are in the nav. Can mouseonclick accompliosh this or is there a better way?

[phpsales]

In JavaScript:

Where Currently:

<td width="23%">
<a href="index.asp?PageAction=VIEWCATS&Category=20" onMouseOver="MM_swapImage('Image2','','Images/assets/tabs/bogeywearON.gif',1)" onMouseOut="MM_swapImgRestore()">
<img src="Images/assets/tabs/bogeywear.gif" alt="Wearables" name="Image2" width="103" height="45" border="0" id="Image2"></a>
</td>

Add onClick to A Element:

onClick="document.getElementById('Image2').src='Images/assets/tabs/bogeywearON.gif'"

E.g.

<td width="23%">
<a href="index.asp?PageAction=VIEWCATS&Category=20" onMouseOver="MM_swapImage('Image2','','Images/assets/tabs/bogeywearON.gif',1)" onMouseOut="MM_swapImgRestore()" onClick="document.getElementById('Image2').src='Images/assets/tabs/bogeywearON.gif'">
<img src="Images/assets/tabs/bogeywear.gif" alt="Wearables" name="Image2" width="103" height="45" border="0" id="Image2"></a>
</td>

[1959mvp]

I have modified the code according to the posted instructions, and still no ability to hold the correct image onClick. Here is my revised code to add the onClick function.

Can anyone see my problem here?

<td width="23%"><a href="topofpagebogeypro1.htm" onMouseOver="MM_swapImage('Image2','','Images/assets/tabs/bogeywearON.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="Images/assets/tabs/bogeywear.gif" alt="Wearables" name="Image2" width="103" height="45" border="0" id="Image2" onClick="document.getElementById('Image2').src='Images/assets/tabs/bogeywearON.gif'"></a></td>
<td width="24%"><a href="topofpagebogeypro2.htm" onMouseOver="MM_swapImage('Image3','','Images/assets/tabs/bogeygearON.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="Images/assets/tabs/bogeygear.gif" alt="Playables" name="Image3" width="104" height="45" border="0" id="Image3" onClick="document.getElementById('Image3').src='Images/assets/tabs/bogeygearON.gif'"></a></td>
<td width="15%"><a href="topofpagebogeypro3.htm" onMouseOver="MM_swapImage('Image4','','Images/assets/tabs/sponsorsignsON.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="Images/assets/tabs/sponsorsigns.gif" alt="Drinkables" name="Image4" width="206" height="45" border="0" id="Image4" onClick="document.getElementById('Image4').src='Images/assets/tabs/sponsorsignsON.gif'"></a></td>
<td width="30%"><a href="topofpagebogeypro4.htm" onMouseOver="MM_swapImage('Image5','','Images/assets/tabs/prizepacksON.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="Images/assets/tabs/prizepacks.gif" alt="Prize Packs" name="Image5" width="104" height="45" border="0" id="Image5" onClick="document.getElementById('Image5').src='Images/assets/tabs/prizepacksON.gif'"></a></td>
<td width="8%"><a href="topofpagebogeypro5.htm" onMouseOver="MM_swapImage('Image6','','Images/assets/tabs/giftcardsON.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="Images/assets/tabs/giftcards.gif" alt="Gift Cards" name="Image6" width="103" height="45" border="0" id="Image6" onClick="document.getElementById('Image6').src='Images/assets/tabs/giftcardsON.gif'"></a></td>