Thread: css rollover

    #1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2003
    Posts
    24
    Rep Power
    0

    css rollover


    Hai all,

    I want create a simple button with css..

    first there is link text (Like "Home")

    if i rollover the link its should shows the bullet in the right side which is in separate table(gif image).

    if i click the link that bullet image is still active where link page is there...

    is it possible in css or any othere method...

    i dont want javascript....

    Please....
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2003
    Posts
    173
    Rep Power
    12
    go to www.justalinkapart.com
    Or something like that, the url may be wrong as in missing a dash, but the domain name itself is right. So do a search for just a link apart.
    They have a tutorial on list menus, they show you how to make list menus and with that same code you can modify it to what you want.

    As well, you could so something similar to this:

    a.mymenu:link{your style}
    a.mymenu:visited{your style, plus a few changes}
    a.mymenu:hover{your setyles, plus background image}

    I think it's like that, I don't use CSS often enough to remember everything.. But yeah, check out a list apart. Hope this helps.
    We all have souls.... where do you want your to go?

    The little princess
    Back from the dead
    The only Hope / End Times
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2003
    Posts
    24
    Rep Power
    0
    Thanks....

    But there is no link for justalinkapart.com.

    i think its dead...

    anyway thanks....

    do u know any other site which covers this topic
  6. #4
  7. No Profile Picture
    Texan at Heart
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2003
    Location
    Castle Rock, CO
    Posts
    316
    Rep Power
    21
    Do you mean something like this:

    <style type="text/css">

    a.button:link
    {
    font-size:14px;
    font-weight:bold;
    text-decoration:none;
    border-styleutset;
    border-color:red;
    border-width:5px;
    background-color:#FFFFCE;
    width:125px;
    color:navy;
    }


    a.button:visited
    {
    font-size:14px;
    font-weight:bold;
    text-decoration:none;
    border-styleutset;
    border-color:red;
    border-width:5px;
    background-color:#FFFFCE;
    width:125px;
    color:navy;
    }

    a.button:active
    {
    font-size:14px;
    font-weight:bold;
    text-decoration:none;
    border-style:inset;
    border-color:red;
    border-width:5px;
    background-color:#FFFFCE;
    width:125px;
    color:maroon;
    }

    a.button:hover
    {
    font-size:14px;
    font-weight:bold;
    text-decoration:none;
    border-style:inset;
    border-color:red;
    border-width:5px;
    background-color:#FFFFCE;
    width:125px;
    color:maroon;
    }

    </style>

    And then in the body:
    <a href="http://www.cnn.com/" class="button">CNN</a>

    Change the widths, colors, border accordingly.
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2003
    Posts
    24
    Rep Power
    0
    Thanks corey...

    this is work fine.. but i want the hover effect....

    when the hover takes place a gif image in the right of the text will show..( its a bullet) actully its is separate TD.....

    any idea...
  10. #6
  11. No Profile Picture
    Texan at Heart
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2003
    Location
    Castle Rock, CO
    Posts
    316
    Rep Power
    21
    The link that IBM recommended: http://www.alistapart.com/stories/ - as far as changing an image with only CSS - I do not think it can be done. CSS is design. You would need to implement ajavascript also.
  12. #7
  13. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2003
    Posts
    173
    Rep Power
    12
    actually, yes you can make roll over images using purely CSS...
    alistapart actually shows you this to some extent.

    for my example or ven coreys all you do is add a background image style to link, visited,click and on hover change that image.

    I'm not going to give exact code, this has already been pretty much done in corey's example. So I leave it to you to find out how to add the backround styles..
    We all have souls.... where do you want your to go?

    The little princess
    Back from the dead
    The only Hope / End Times

IMN logo majestic logo threadwatch logo seochat tools logo