469,955 Members | 2,576 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,955 developers. It's quick & easy.

image rollover plus active state - possible?

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
8 2916
drhowarddrfine
7,435 Expert 4TB
Did you try a:visited?
Mar 7 '08 #2
mrking
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
7,435 Expert 4TB
Now you've gotten into javascript land.
Mar 7 '08 #4
mrking
28
Nooooooooooooooooooooooooooooooooooooooooooooooo

:)

Thanks for the info.
Mar 7 '08 #5
AutumnsDecay
170 100+
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
mrking
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
mrking
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
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.

Similar topics

1 post views Thread by mrb | last post: by
9 posts views Thread by MrBaseball34 | last post: by
15 posts views Thread by Applebrown | last post: by
2 posts views Thread by CK | last post: by
7 posts views Thread by simchajoy2000 | last post: by
2 posts views Thread by Casimir | last post: by
2 posts views Thread by mrking | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.