Question

i have two buttons in menu on mouse over the button change image to another image but on mouse out it remains back to its original image what i want to do is to when i click this button it stat should be active so that one can know that which page he is visiting now.
my code is

#menu
{width: 628px;
height: 69px;
padding-left: 380px;
}
#menu ul {  list-style: none;}

#menu li {  display: inline;}
#menu a {   float: left;
    width: 107px;
    height: 28px;
        display: block;
    }
#menu a:hover { width: 107px;
        height: 28px;
}
#emailUs
  { display: block;
    width: 107px;
    height: 28px;
    background: url("../images/add_1.png") no-repeat 0 0;
}
#emailUs:hover
  {
    background: url("../images/add_h.jpg") no-repeat 0 0;
  }

and the html code is

#menu
{
width: 628px;
height: 69px;
padding-left: 380px;

}

#menu ul {
    list-style: none;
}

#menu li {

    display: inline;
}

#menu a {
    float: left;
    width: 107px;
    height: 28px;
        display: block;


}

#menu a:hover {
    width: 107px;
        height: 28px;



}

#emailUs
  {
    display: block;
    width: 107px;
    height: 28px;
    background: url("../images/add_1.png") no-repeat 0 0;

  }

  #emailUs:hover
  {
    background: url("../images/add_h.jpg") no-repeat 0 0;
  }

Note: my images are seperated images not a sprite image.

you can see the demo what i want to achieve (www.daniweb.com)

Answer 1

Send a varible from program which page you are on. And add a class active or inactive and css the class

for eg :

<a href="home.php" class="selectedmenu">Home</a>
<a href="myaccount.php" class="">My Account</a>

Now give background-image for the class selected menu so only the home image will have the active background . If you are not using sprite then do like this

<li id="home"><a href="home.php" class="selectedmenu">Home</a></li>
<li id="myaccount"><a href="myaccount.php" class="">My Account</a></li>

then call

#home .selectedmenu{
background-image:url('homeselected.png');
}

To send variable

<?php
$menuSelected ='home';
?>
<a href="home.php" class="<?php if ($menuSelected=='home')echo ('selectedmenu');?>">Home</a>