#1
  1. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2003
    Posts
    9
    Rep Power
    0

    Question How do you make a CSS image rollover?


    I need to know how to make a CSS rollover that swaps only 2 images, just like the javascript rollovers. Only I haerd CSS took less coding, thats why I'm asking!!!!!!!!!
  2. #2
  3. Contributing User
    Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Oct 2001
    Location
    New Zealand
    Posts
    1,774
    Rep Power
    25
    Something like:

    <html>
    <head>
    <style type='text/css'>
    a.rollover{background-image:url('blueSquare.gif'); width:20px; height:20px;}
    a.rollover:hover{background-image:url('redSquare.gif'); width:20px; height:20px;}
    </style>
    </head>
    <body>
    <a class='rollover' href='#'></a>
    </body>
    </html>

    You can use background-repeat and y/x positions to create a single background image for the rollovers.
  4. #3
  5. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2003
    Posts
    9
    Rep Power
    0

    Cool Thanks


    Thanks Blinky, you're a pal!!!

IMN logo majestic logo threadwatch logo seochat tools logo