Click here to Skip to main content
11,643,493 members (81,694 online)
Rate this: bad
good
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 27-Apr-13 23:38pm
    Comments
    Brian A Stephens at 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 at 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
    0 OriginalGriff 485
    1 jyo.net 480
    2 DamithSL 328
    3 Sergey Alexandrovich Kryukov 270
    4 CPallini 222
    0 DamithSL 541
    1 OriginalGriff 495
    2 Mika Wendelius 469
    3 Sergey Alexandrovich Kryukov 330
    4 Afzaal Ahmad Zeeshan 324


    Advertise | Privacy | Mobile
    Web04 | 2.8.150731.1 | Last Updated 1 May 2013
    Copyright © CodeProject, 1999-2015
    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