Click here to Skip to main content
12,065,888 members (36,947 online)
Rate this:
 
Please Sign up or sign in to vote.
See more: Javascript CSS HTML
Hi ,

I want to change the colour of the image after click , Basically all the images in the nav bar are background images set in css and I have another class with greater opacity (same as google plus nav bar )

My CSS are:

#vtab > ul > li.home {
background: url('images/home21.png') no-repeat center center;

}

#vtab > ul > li.selected {
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);

border-right: none;
z-index: -1;

position: relative;
}
#vtab > ul > li:hover , #vtab > ul > li:active,#vtab > ul > li:focus,#vtab > ul > li:visited {
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);

border-right: none;
z-index: -1;

position: relative;
}



HTML:

  • Home

  • Courses


  • <img src="images/leftarrow1.png" style="height: 88px;width: 74px;margin-left: -47px;margin-top: -18px; position:relative"
    />


    This is the nav bar set in list .

    For more detail I have uploaded this at link : www.adhyay.aargss.com
    Please have a look at left navigation bar , As of now only hover effect is given but i want that hover effect to be permanent after click which would be same as google plus.

    Please help .
    Posted 28-Apr-13 0:38am
    Comments
    Brian A Stephens 29-Apr-13 16:04pm
       
    Please post any JS related to the above code and reveal the html SOURCE, rather than rendered. It looks like you have a clickimagechange() function that we need to see. From piecing apart the HTML in the page source of your post, it looks like your LI and UL tags are all scrambled. I would rather see just the relevant code here than go out to the full external site. Thanks.
    Member 8371841 1-May-13 3:51am
       
    Your site has rendering issues with IE10

    1 solution

    Rate this: bad
     
    good
    Please Sign up or sign in to vote.

    Solution 1

    As per my inspection, Google plus uses two sets of images - one gray scale and anoe coloured all embedded in one single image. they then use css image sprites i.e., display a part of the image. And their css for hover and selected is same.

    And a small advice:
    I found that you use filters, filters deprecated in IE and are windows specific. It is better to use two sets of images embedded in a single image for faster loading.
      Permalink  

    This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

      Print Answers RSS
    Top Experts
    Last 24hrsThis month


    Advertise | Privacy | Mobile
    Web04 | 2.8.160207.1 | Last Updated 1 May 2013
    Copyright © CodeProject, 1999-2016
    All Rights Reserved. Terms of Service
    Layout: fixed | fluid

    CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100