I'm having trouble figuring out why my program isn't working as expected. The onmouseout event doesn't seem to trigger when hovering over an image in the menu...
Check this link for more information
Below is the code snippet causing the issue:
<script type="text/javascript" rel="javascript" src="jquery-1.10.2.min.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css" />
<script>
function over(me){
me2=me;
if(me=='about'){
$('#id_About').attr('src','images/hover-aboutus.jpg');}else{$('#id_About').attr('src','images/aboutus.jpg');}
if(me=='partners') {
$('#id_Partners').attr('src','images/hover-partners.jpg');}else{$('#id_Partners').attr('src','images/partners.jpg');
}
if(me=='products'){
$('#id_Products').attr('src','images/hover-products.jpg');}else{$('#id_Products').attr('src','images/products.jpg');}
if(me=='contactus'){
$('#id_Contactus').attr('src','images/hover-contactus.jpg');}else{$('#id_Contactus').attr('src','images/contactus.jpg');}
}
$( document ).ready(function() {
me2='about';
$('#id_About').attr('src','images/hover-aboutus.jpg');
});
</script>
<style type="text/css">
img {
border: 0;
}
body {text-align: center; margin: 0; padding: 0;}
#wrapper {width: 830px; margin: 0 auto; position: relative;}
</style>
</head>
<input id="data2" type="hidden" value="<?php if (isset($_POST["data2"])){echo $_POST["data2"]; }else{}?>">
<div id="wrapper">
<table width=802 border=0 cellspacing=0 cellpadding=0>
<tr>
<td valign="bottom" align="left"><a href="aboutus1.php"><img src="images/cti-logo.png"></a></td>
<td valign="bottom" align="right">
<a href="welcome.php">
<img src="images/home.jpg" onmouseover="this.src='images/hover-home.jpg'" onmouseout="this.src='images/home.jpg'"/>
</a>
<a href="aboutus1.php" target="content">
<img id="id_About" onclick="over('about')" src="images/aboutus.jpg" onmouseover="this.src='images/hover-aboutus.jpg'" onmouseout="if(me2=='about'){}else{this.src='images/aboutus.jpg'}" />
</a>
<a class="partners" href="partners.php" target="content">
<img onclick="over('partners')" id="id_Partners" src="images/partners.jpg" onmouseover="this.src='images/hover-partners.jpg'" onmouseout=" if(me2=='partners'){}else{this.src='images/partners.jpg'}" />
</a>
<a href="products1_1.php" target="content">
<img onclick="over('products')" id="id_Products" src="images/products.jpg" onmouseover="this.src='images/hover-products.jpg'" onmouseout=" if(me2=='products'){}else{this.src='images/products.jpg'}" />
</a>
<a href="contactus.php" target="content">
<img id="id_Contactus" onclick="over('contactus')" src="images/contactus.jpg" onmouseover="this.src='images/hover-contactus.jpg'" onmouseout=" if(me2=='contactus'){}else{this.src='images/contactus.jpg'}" class="contactus" />
</a>
</td>
</tr>
</table>
<img src="images/cti-upperbar.jpg" />
</div>
Every menu item is being highlighted unexpectedly, and I'm feeling quite frustrated about it.