Posted by Els on 04/01/07 13:16

Tom Miller wrote:

> Once I got a little knowlege about CSS I was able to cause my hyperlinks to
> do some nice rollover effects.
>
> I recently downloaded a free html template for my main website (in the
> signature box). Its been a while since I have looked at html but is there a
> way (without using "much" javascript) to cause the graphic image to
> "standup/standout" when you rollover it with your mouse?
>
> The picture I am seeing in my head seems to show a border on the bottom and
> righthand sides of the graphic to make it "standup" and then those go away
> when the menu graphic is flat (the mouse is no longer over the graphic).
>
> I understand I can do with with Javascript and 2 different graphic files.

You can also do it with CSS and 1 graphic file.
http://wellstyled.com/css-nopreload-rollovers.html

And then it's just a matter of making the borders part of the graphic.

If you want plain HTML borders, no images, you can just use CSS,
without a graphic, by changing just the colour of the borders on
hover. If you'd *add* a border on the right and bottom for example,
the entire link would jump on hover. If you make sure the borders are
already there, all you need to do is change their colour to give the
impression of being pushed in or out.
Of course, the text inside that 'button' will not appear to move. For
that, you can play with the size of the padding. If your borders are
3px wide, also move 3px off the padding from left to right and top to
bottom (or vice versa, depending on pushed in or pushed out effect).



--
Els http://locusmeus.com/
accessible web design: http://locusoptimus.com/

[Back to original message]