0

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>
3
Contributors
2
Replies
3
Views
10 Years
Discussion Span
Last Post by ~s.o.s~
This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.