image rollover plus active state - possible?

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • mrking
    New Member
    • Feb 2008
    • 28

    image rollover plus active state - possible?

    Hello,

    I have a test site running at http://artbymichaelkin g.com/DS/

    As you can see with the navigation I have the image rollover. I do this with CSS via:

    Code:
    .companyrollover a{
        display: block;
        width: 95px;
        height: 20px;
        background: url(images/menubar/COMPANY.jpg) no-repeat;
        text-decoration: none;
        float: left;
             }
     
    .companyrollover a:hover {
        background-position: -95px 0;
               }
    
    .companyrollover a:active {
    	background-position: -95px 0;
    	}
    Basically, the image is 190px wide and has two images in it, on the left is the non select image and the other is the selected image. On roller it just shift the red one into view.

    However, I CANNOT get it to stay red after one clicks in a certain area.

    As you can see from my code, I tried 'a:active' but that does not work.

    Does anyone know how to make the rollover stay on the red version after it is clicked?

    Cheers,

    Michael
  • drhowarddrfine
    Recognized Expert Expert
    • Sep 2006
    • 7434

    #2
    Did you try a:visited?

    Comment

    • mrking
      New Member
      • Feb 2008
      • 28

      #3
      Originally posted by drhowarddrfine
      Did you try a:visited?
      Just tried it.

      It works in that it will show the rolled over image I want after it is clicked, however it constantly shows after others are clicked as well.

      Is there a way to revert it to the original image state once another menu link is selected?

      Comment

      • drhowarddrfine
        Recognized Expert Expert
        • Sep 2006
        • 7434

        #4
        Now you've gotten into javascript land.

        Comment

        • mrking
          New Member
          • Feb 2008
          • 28

          #5
          Noooooooooooooo ooooooooooooooo ooooooooooooooo ooo

          :)

          Thanks for the info.

          Comment

          • AutumnsDecay
            New Member
            • Mar 2008
            • 170

            #6
            Or, for each page, have the respective link colored red (in Photoshop).

            Example, on home page load "company_pic_re d", "xx1_pic_norm", "xx_pic_nor m", "xx2_pic_no rm", etc..

            However, when they click on the image for xx1 (bringing it to xx1.html), have the following pattern:

            "company_pic_no rm", "xx1_pic_red"," xx_pic_norm", "xx2_pic_no rm", etc..

            I know it's not explained very well, but if you can comprehend what, exactly, I'm aiming for, than you're golden! All it is is editting a FEW files in Photoshop (or an image edittor of your choice).

            Comment

            • mrking
              New Member
              • Feb 2008
              • 28

              #7
              Yup, I understand what you are doing but my site is made with php and css using Wordpress - yes, not the best for custom work......

              and it will always call the same 'navbar' in for every page.

              Comment

              • mrking
                New Member
                • Feb 2008
                • 28

                #8
                Originally posted by drhowarddrfine
                Now you've gotten into javascript land.
                Just wanted to drop by and say you don't need to use javascript at all to complete this.

                I did get it working perfectly with CSS. If anyone needs the solution you can PM me.

                Comment

                • edallmighty
                  New Member
                  • Jan 2012
                  • 2

                  #9
                  Hello,

                  How did you accomplish this? I"m going crazy trying to figure it out. I'm only using 2 buttons but they direct to content in an iframe so there are no additional pages to have different active clicked classes.

                  Thanks!!

                  Comment

                  Working...