Simple Rollover Menu effect

Discussion in 'HTML' started by Els, Apr 1, 2007.

  1. Els

    Els Guest

    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/
     
    Els, Apr 1, 2007
    #1
    1. Advertising

  2. Els

    Tom Miller Guest

    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.

    Thanks,
    Tom Miller
    --
    Try http://www.ChatNFiles.com which has a new telnet chat system and a HUGE
    file downloads collection. Ecard: http://bccs.chatnfiles.com/ecard3.htm



    --
    Posted via a free Usenet account from http://www.teranews.com
     
    Tom Miller, Apr 1, 2007
    #2
    1. Advertising

  3. Els

    Tom Miller Guest

    ">> I recently downloaded a free html template for my ) to cause the graphic
    image to
    >> "standup/standout" when you rollover it with your mouse?

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

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


    Thank you Els.



    --
    Posted via a free Usenet account from http://www.teranews.com
     
    Tom Miller, Apr 1, 2007
    #3
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Sandro

    rollover effect on a button?

    Sandro, Jan 14, 2005, in forum: Java
    Replies:
    2
    Views:
    429
    Andrew Thompson
    Jan 14, 2005
  2. groves

    rollover effect

    groves, Aug 26, 2006, in forum: Python
    Replies:
    13
    Views:
    555
    Diez B. Roggisch
    Aug 27, 2006
  3. Sorin Schwimmer

    rollover effect

    Sorin Schwimmer, Aug 28, 2006, in forum: Python
    Replies:
    0
    Views:
    291
    Sorin Schwimmer
    Aug 28, 2006
  4. Jeff
    Replies:
    1
    Views:
    382
    Luis Roquette Valdez
    Mar 21, 2009
  5. Replies:
    0
    Views:
    169
Loading...

Share This Page