3 replies [Last post]
genius2k
genius2k's picture
Offline
newbie
Last seen: 9 years 9 weeks ago
Timezone: GMT+5.5
Joined: 2013-07-23
Posts: 5
Points: 7

when i click on the link"home" the image should change and stay at home1.png till another link is click but it doesn't...active state is not working plz help.

<strong>php is as </strong>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TEST</title>
<link href="css/test.css" rel="stylesheet" type="text/css">
</head>
 
<body>
    <div class=sidebar>       
              	<ul id=nav>
                    <li class="home"><a href="index.php"> </a></li>
                    <li class="bye"><a href="bye.php"> </a></li> 
                </ul>
     </div>
 </body> 
 
</html>
 
<strong>css</strong>
 
li.home{ 
 background: url("../images/home.png") no-repeat;
 width:150px;
 height:65px;
}
 
 
li.bye{ 
background:url("../images/bye.png") no-repeat;
width:150px;
 height:65px;  
}
 
 
li.home:hover {
	background-image: url(../images/home1.png);
	}
li.bye:hover {
	background-image: url(../images/bye1.png);
	}
 
li.home:active {
	background-image: url(../images/home1.png);
	}
li.bye:active {
	background-image: url(../images/bye1.png);
	}

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 29 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

:active???

I may not have understood your problem, so if not: never mind.

The :active pseudo class doesn't mean what you think it does. The active state occurs while the mouse button or enter key is depressed. Once the button or key is released, the element is no longer active.

For what I think it is you want, see http://csscreator.com/topic/css-current-page-nav-link-highlight from our how-to section.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

genius2k
genius2k's picture
Offline
newbie
Last seen: 9 years 9 weeks ago
Timezone: GMT+5.5
Joined: 2013-07-23
Posts: 5
Points: 7

isaw the link but didn't get

isaw the link but didn't get anything..i found that we can use jquery

how do i get the java/jquery to go about it..... since class=home assigns the pic home.png and home1 assigns the pic home1.png...same when class=bye assigns pic bye.png and class=bye1 assigns the name bye1.png

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 37 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

You really need to be a

You really need to be a little more descriptive than 'isaw the link but didn't get anything' what's this mean, you saw a link, read it but decided it wasn't what you wanted, or you attempted to use the guide and worked up some code but it failed to work?

Client side scripting isn't really the answer to this type of requirement, you either use CSS or server side scripting to manipulate classes for elements that are active. I suggest re-reading that guide might help and also you would need to add some form of page identifier to the body tag for each page i.e 'home-page' if this is a dynamic site e.g WP, Drupal, or Joomla then that would be done for you along with token identifiers on the navigational elements.

You'll find the home of jQuery by googling for it Wink

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me