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>
