Connecting Tech Pros Worldwide Forums | Help | Site Map

image rollover plus active state - possible?

Newbie
 
Join Date: Feb 2008
Posts: 27
#1: Mar 7 '08
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

drhowarddrfine's Avatar
Expert
 
Join Date: Sep 2006
Posts: 5,577
#2: Mar 7 '08

re: image rollover plus active state - possible?


Did you try a:visited?
Newbie
 
Join Date: Feb 2008
Posts: 27
#3: Mar 7 '08

re: image rollover plus active state - possible?


Quote:

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?
drhowarddrfine's Avatar
Expert
 
Join Date: Sep 2006
Posts: 5,577
#4: Mar 7 '08

re: image rollover plus active state - possible?


Now you've gotten into javascript land.
Newbie
 
Join Date: Feb 2008
Posts: 27
#5: Mar 7 '08

re: image rollover plus active state - possible?


Nooooooooooooooooooooooooooooooooooooooooooooooo

:)

Thanks for the info.
Member
 
Join Date: Mar 2008
Posts: 60
#6: Mar 7 '08

re: image rollover plus active state - possible?


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).
Newbie
 
Join Date: Feb 2008
Posts: 27
#7: Mar 7 '08

re: image rollover plus active state - possible?


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.
Newbie
 
Join Date: Feb 2008
Posts: 27
#8: Mar 29 '08

re: image rollover plus active state - possible?


Quote:

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.
Reply