Click here to Skip to main content
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 28-Apr-13 0:38am
    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 273
    1 Maciej Los 255
    2 Aajmot Sk 234
    3 Richard MacCutchan 200
    4 Marcin Kozub 195
    0 OriginalGriff 7,903
    1 Sergey Alexandrovich Kryukov 7,127
    2 DamithSL 5,604
    3 Manas Bhardwaj 4,986
    4 Maciej Los 4,820


    Advertise | Privacy | Mobile
    Web02 | 2.8.1411023.1 | Last Updated 1 May 2013
    Copyright © CodeProject, 1999-2014
    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