CODEWITHSUNDEEP
javascripthtmlcssmenu
abc123
abc123

Reputation: 95

Menus in Navigation are highlighting

I can't seem to find what went wrong with my program. When you hover on an image menu, onmouseout is not working..

Click here

Here's the code for that:

<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>

All menus are being highlited :( I'm really frustrated now.

Upvotes: 0

Views: 60

Answers (2)

Pedr&#227;o
Pedr&#227;o

Reputation: 301

Don't do it with Javascript. CSS can solve this issue way easier. Just add a class to each a href of your code, then in your CSS file do something like this.

.your-class{
    background: url(your-file.jpg) no-repeat;}

.your-class a:hover{
    background: url(your-file-hover.jpg) no-repeat;}

OR

.parent-class a{
    background: url(your-file.jpg) no-repeat;}

.parent-class a:hover{
    background: url(your-file-hover.jpg) no-repeat;}

Upvotes: 2

Lucas Maus
Lucas Maus

Reputation: 96

The image name is wrong at the second menu item. Check the tag img at line 56, the src is equal to "images/paratners.jpg" and should be "images/partners.jpg"

Upvotes: 1

Related Questions