Image rollover

[williamrouse]

• 
  
• 
  

[falkencreative]

You are using this in your CSS:

 

a:rollover

a.rollover:hover

 

I'm guessing the ":" the first line was supposed to be a "." If so, fix that, and then you'll need to add a "rollover" class to your link element, like this:

 

 

I also believe you need some sort of text inside the element, like this:

 

link text

 

You can then hide the text by using CSS:

 

text-indent:-999px;

[williamrouse]

Thanks for the syntax correction. I have made some progress but realize I don?t understand the display problem at all.

First with the comments I just received, I can bring the image on the screen. What I don?t understand is how to access the various parts of the image.

In my case my image is 176px wide and 80px high. What this means is that in one state I would like to bring the first 40 pixels to the screen 176 pixels wide, and then in another state pixel 41 through 80.

My other option which I will work on now is to lay the bitmap 352 wide and 40 high and see if my code works.

Thanks!

[falkencreative]

In that case, adjust a couple things...

 

-- give "a.rollover" a height of 40px, rather than 39px

-- on the hover state, use "background-position: bottom left;"

[williamrouse]

As I often say when I see something that attracts me, ?Yippee Skipee? thanks.

The concepts works I just need to polish my bitmaps for production work.

[falkencreative]

Great. =) CSS based image rollovers can be quite useful -- I use them in almost every project I work on.

[williamrouse]

Now that I somewhat understand the CSS and HTML, I need to get my graphics skills together to make the illusion work well. Thanks again for your assistance.:cool:

[LSW]

Try Eric Meyers site to see what can be done with rollovers. http://meyerweb.com/eric/css/edge/.

 

Also if you use Hover on a site, always use :focus doing the same thing. That is so keyboard users can see the rollover to to track where they are.

[williamrouse]

Are you suggesting that the CCS declaration look like this:

a.rollover:hover, a.rollover:focus {
...
}

[falkencreative]

Are you suggesting that the CCS declaration look like this:

a.rollover:hover, a.rollover:focus {
...
}

 

Yes, that is correct.