By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,767 Members | 1,255 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,767 IT Pros & Developers. It's quick & easy.

image rollover plus active state - possible?

P: 28
Hello,

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

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

Expand|Select|Wrap|Line Numbers
  1. .companyrollover a{
  2.     display: block;
  3.     width: 95px;
  4.     height: 20px;
  5.     background: url(images/menubar/COMPANY.jpg) no-repeat;
  6.     text-decoration: none;
  7.     float: left;
  8.          }
  9.  
  10. .companyrollover a:hover {
  11.     background-position: -95px 0;
  12.            }
  13.  
  14. .companyrollover a:active {
  15.     background-position: -95px 0;
  16.     }
  17.  
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
Mar 7 '08 #1
Share this Question
Share on Google+
8 Replies


drhowarddrfine
Expert 5K+
P: 7,435
Did you try a:visited?
Mar 7 '08 #2

P: 28
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?
Mar 7 '08 #3

drhowarddrfine
Expert 5K+
P: 7,435
Now you've gotten into javascript land.
Mar 7 '08 #4

P: 28
Nooooooooooooooooooooooooooooooooooooooooooooooo

:)

Thanks for the info.
Mar 7 '08 #5

AutumnsDecay
100+
P: 170
Or, for each page, have the respective link colored red (in Photoshop).

Example, on home page load "company_pic_red", "xx1_pic_norm","xx_pic_norm", "xx2_pic_norm", etc..

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

"company_pic_norm", "xx1_pic_red","xx_pic_norm", "xx2_pic_norm", 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).
Mar 7 '08 #6

P: 28
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.
Mar 7 '08 #7

P: 28
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.
Mar 29 '08 #8

P: 2
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!!
Jan 17 '12 #9

Post your reply

Sign in to post your reply or Sign up for a free account.