Help with JavaScript Menu

Hi. Im developing my first website and need some help with my menu. Im trying to use the rollover effect using images. The 'MouseOver' function is working just fine. But I need the second image(hover image) to appear and stay there when the user clicks on the link and opens the new page and returns to the first image when another button is clicked. Is there a way to do that without designing a new menu for every page?

I tried using the 'OnMouseClick' event but its not working. Maybe I am doing something wrong?

Hope someone can help. My code is below :

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>menu</title>
<link rel="stylesheet" type="text/css" href="CSS/text.css">
<script type="text/javascript">



if (document.images) 
{

lettersN = new Image(143,23);
lettersN.src = 'images/buttonLetters.gif';

lettersH = new Image(143,23);
lettersH.src = 'images/a_buttonLetters.gif';



function myOn(myImgName) 
{ 
document[myImgName].src=eval(myImgName+ 'H' ).src; 
} 

function myOut(myImgName) 
{ 
document[myImgName].src=eval(myImgName+ 'N' ).src; 
} 
function changeImg(myImgName) 
{
document[myImgName].src = eval(myImgName+ 'H' ).src;
}


}

</script>


</head>

<body>



<table >
	<tr>
		<td colspan="3" height="29">



<a HREF= "tajweed_letters.htm" ><img 


SRC= "images/buttonLetters.gif" ALT= "Java Script Contents" NAME= "letters" BORDER= "0" 
onMouseOver = "myOn(this.name)" 

onMouseOut = "myOut(this.name)"

onMouseClick = "myOn(this.name)"


onMouseClick="changeImg(this.name); return false;">



</a>
</tr>
</td>
	


	
</table>


</body>

</html>

shaist

Newbie Poster

1 post since Jul 2007

Reputation Points: 10

Solved Threads: 0

4 Years Ago

0

moved

Ancient Dragon

Retired & Loving It

Team Colleague

30,050 posts since Aug 2005