CSS Rollover

April 19th, 2007 by Steve

Suppose you want to add a rollover banner ad on your site and would rather do it with CSS (Style Sheets) instead of javascript. Start by creating an image that is twice as wide as the banner, so that it loads all at once and there is no delay on the mouseover:
banner ad
Next, add the following lines to the stylesheet:
.rollover a {
display:block;
width: 234px;
height: 60px;
background: url("/ads/banner-free-tiles.gif") 0 0 no-repeat;
float: right;
}
.rollover a:hover {
background-position: -234px 0px;
}

The height and width match the size of the ad. The actual image is twice as wide (468×60). The a:hover pseudo-class moves the image 234 pixels to the left, showing the right half during a mouseover.
Add this code where you want the ad to appear:
<span class="rollover"><a href="http://xanadu-fx.com/tiles/" title="Free Background images"> </a></span>

and you should see this:

You can also use this technique to make rollovers in menus, but I prefer to use text based links in navigation for accessibility reasons. Also, you can stack the images vertically, but be sure to adjust the code in “a:hover” accordingly so the image moves up instead of left.

Posted in | 10 Comments »

10 Responses

  1. https://www.enjoyhosting.net/ Says:

    I visited several web pages except the audio feature for audio songs existing at this website is truly fabulous.

  2. viagra Says:

    Of the medication most commonly used for erectile dysfunction, Viagra is most common.
    When was the last time you have totally different hairstyle.
    This type of studies brings hopes to people that suffer from this condition knowing that something that does not have a known
    cure is actually on the verge of getting positive results.

  3. DB Vehicle Electrics Says:

    I must thank you for the efforts you’ve put in writing this
    blog. I am hoping to check out the same high-grade content by you later on as well.

    In truth, your creative writing abilities has inspired me to get my very own website now 😉

  4. Rudolf Says:

    You are so interesting! I don’t believe I have read something like
    this before. So nice to find another person with unique thoughts on
    this subject matter. Really.. thank you for starting this
    up. This site is one thing that is needed on the internet, someone with a
    bit of originality!

    Also visit my web-site – dog flea collars (Rudolf)

  5. Kitsap garage door Says:

    Generally, steel doors are more inexpensive
    than wooden doors. Also, unlike steel, wood does not dent and,
    thus, will withstand the occasional stray basketball
    or hockey puck without any problem. These doors just move in two directions that are downward and upward.

    Also visit my blog :: Kitsap garage door

  6. Win an Iphone 5S or 5C for Free! Says:

    Win a Iphone 5C or 5S right here!

    my webpage :: Win an Iphone 5S or 5C for Free!

  7. A couple Basketball Shoes For men Says:

    I’m really enjoying the theme/design of your site.
    Do you ever run into any internet browser compatibility problems?
    A few of my blog readers have complained about my site not working correctly in Explorer but looks
    great in Opera. Do you have any advice to help fix this problem?

  8. shoes for men with price Says:

    you prefer manufacture the best asics shoes sale for you to choose.
    Finish Line is not just an athletic shoes store but also
    sells casual shoes and sandals for both genders. A great product.

  9. gaming Desktop asus essentio Says:

    Before purchasing a Gaming PC, always check the features of the following
    key components:. A faster processor gives better speed, efficiency and performance and hence the desktop
    with such a processor will have a higher price.
    Remove viruses.

  10. Mason Says:

    Wonderful beat ! I would like to apprentice at the same time as you amend
    your website, how could i subscribe for a blog site?
    The account helped me a applicable deal. I were tiny bit familiar of this your broadcast offered bright cler concept

Leave a Comment

Please note: Comment moderation is enabled and may delay your comment. There is no need to resubmit your comment.