www.webdeveloper.com
Results 1 to 5 of 5

Thread: Rollover buttons question

  1. #1
    Join Date
    Jul 2012
    Posts
    2

    Rollover buttons question

    Just starting so I hope this isn't a silly question.
    I am trying to get a rollover button to keep it's 'active' state when on that page.
    I have a 3-part rollover image, green with shadow at the top for the normal setting, green with shadow at the bottom for the 'hover' state, then red with the tinting in the middle in the 'active' state.
    I have multiples of these in a div already, with different wording on top to identify the link.
    I would like to keep the 'active' state of the button when it's on that page.
    I know I can create a image of the red button and add text on top in PS.
    My issue is that, from what I have read online, I need to create a div for this.
    Since these are already in a div, adding another div rearranges everything.
    Is there an easy way to do this? or am I stuck with the 'old' PS way?

  2. #2
    Join Date
    Jul 2012
    Location
    Stockport, Manchester, United Kingdom
    Posts
    11
    Code:
    .menu a{
    background:url(yourimage.png") no-repeat scroll 0 0 transparent;
    height:19px; /* Image Height*/
    width: 100px; /* Image Width */
    }
    .menu a:hover{
    background:url(yourimagehover.png") no-repeat scroll 0 0 transparent;
    height:19px; /* Image Height*/
    width: 100px; /* Image Width */
    }
    .menu .current{
    background:url(yourimagecurrrent.png") no-repeat scroll 0 0 transparent;
    height:19px; /* Image Height*/
    width: 100px; /* Image Width */
    }
    somthing like this is what you want if you want to do it in CSS

  3. #3
    Join Date
    Jul 2012
    Posts
    2
    dava, again, sorry if this elementary, but in you code would I need 3 different image (button) files or just one?
    In other words if my image is called 'button', would that one file be recognized as 'button.png' (that one is obvious), 'buttonhover.png', & 'buttoncurrent.png'??
    I am trying it to see if I can figure this all out.

    Thanks

  4. #4
    Join Date
    Sep 2006
    Location
    new york
    Posts
    266
    Don't use different IMAGES. Use CSS to style different APPEARANCE of one button for anchor a {} and pseudo classes a:link {} a:visited {} a:hover {} a:focus {} a:active. Then create another .class (such as .current or .here) and add that to link for current page
    Code:
     <ul id="navbar">
        <li id="home"><a href="../index.html">Home</a></li>
        <li id="office" class="here"><a href="#nogo">Office</a></li>
        <li id="staff"><a href="../staff/index.html">Staff</a></li>
    ...</ul>
    P.S. The links could have different background-images
    Last edited by auntnini; 07-24-2012 at 06:25 PM. Reason: P.S.

  5. #5
    Join Date
    Jun 2008
    Location
    Europe
    Posts
    1,096
    Give up the rollover buttons and go for CSS Sprites!

    See my post here:
    http://www.webdeveloper.com/forum/sh...d.php?t=263086

    Here is an example of what you can do with them:
    http://jsfiddle.net/hxzRq/1/

    (The JavaScript is for the tooltip under the buttons - the CSS Sprite does not need JavaScript by itself!)

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles