Style Sheets
  Home arrow Style Sheets arrow Page 4 - Creating Rollover Effects with CSS Sprites
Dev Articles Forums 
ADO.NET  
Apache  
ASP  
ASP.NET  
C#  
C++  
ColdFusion  
COM/COM+  
Delphi-Kylix  
Design Usability  
Development Cycles  
DHTML  
Embedded Tools  
Flash  
Graphic Design  
HTML  
IIS  
Interviews  
Java  
JavaScript  
MySQL  
Oracle  
Photoshop  
PHP  
Reviews  
Ruby-on-Rails  
SQL  
SQL Server  
Style Sheets  
VB.Net  
Visual Basic  
Web Authoring  
Web Services  
Web Standards  
XML  
Mobile Linux 
App Generation ROI 
IBM® developerWorks 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us Get Paid 
Request Media Kit
Contact Us 
Site Map 
Privacy Policy 
Support 
 USERNAME
 
 PASSWORD
 
 
  >>> SIGN UP!  
  Lost Password? 
STYLE SHEETS

Creating Rollover Effects with CSS Sprites
By: Alejandro Gervasio
  • Search For More Articles!
  • Disclaimer
  • Author Terms
  • Rating: 4 stars4 stars4 stars4 stars4 stars / 12
    2007-02-12

    Table of Contents:
  • Creating Rollover Effects with CSS Sprites
  • Creating rollover buttons with CSS: a traditional approach
  • Improved rollover buttons: using a CSS sprite-based approach
  • Completing the CSS sprite-based rollover example

  • Rate this Article: Poor Best 
      ADD THIS ARTICLE TO:
      Del.ici.ous Digg
      Blink Simpy
      Google Spurl
      Y! MyWeb Furl
    Email Me Similar Content When Posted
    Add Developer Shed Article Feed To Your Site
    Email Article To Friend
    Print Version Of Article
    PDF Version Of Article
     
     
    ADVERTISEMENT


    Creating Rollover Effects with CSS Sprites - Completing the CSS sprite-based rollover example


    (Page 4 of 4 )

    As I promised in the lines that you just read, here is the complete source code that creates the CSS sprite-based rollover buttons, including the respective markup. Take a look at the below code sample, please:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
     
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
     
    <title>Rollover Buttons using CSS sprites</title>
     
    <style type="text/css">
       
    body{
      
        padding: 0;
      
        margin: 0;
      
        background: #fff;
       
    }

        h1{
      
        font: bold 24px Arial, Helvetica, sans-serif;
      
        color: #000;
       
    }

        ul{
      
        display: block;
       
       width: 150px;
      
        height: 25px;
      
        margin: 0;
      
        padding: 0;
      
        background: #fff url(buttons.gif) 0 0 no-repeat;
       
    }

        li{
      
        margin: 0;
      
        padding: 0;
       
       font: normal 12px Arial, Helvetica, sans-serif;
      
        color: #00f;
      
        overflow: hidden;
      
        list-style: none;
       
    }

        li a{
      
        display: block;
      
        width: 150px;
      
        height: 25px;
       
        margin: 0;
      
        padding: 0;
      
        background: #fff url(buttons.gif) 0 0 no-repeat;
      
        padding-left: 50px;
      
        text-decoration: none;
       
    }

        li a:link{
      
        color: #000;
      
        background-position: 0 0;
       
    }

        li a:visited{
      
        color: #00f;
      
        background-position: 0 -25px;
       
    }

        li a:hover{
      
        color: #c90;
       
       background-position: 0 -77px;
       
    }

        li a:active{
      
        color: #f00;
      
        background-position: 0 -51px;
       
    }
     
    </style>
      </head>
      <body>
       
    <h1>Rollover Buttons using CSS sprites</h1>
       
    <ul>
         
    <li><a href="#">Profile</a></li>
         
    <li><a href="#">Services</a></li>
         
    <li><a href="#">Products</a></li>
         
    <li><a href="#">Customers</a></li>
         
    <li><a href="#">Contact</a></li>
       
    </ul>
      
    </body>
    </html>

    All right, that's all the client-side code that you need to create a set of five rollover buttons that uses one CSS sprite. You may want to test this example on your own machine, so I included a ZIP file that contains the all HTML files and background images shown here. I hope you enjoy using this CSS sprite!

    Final thoughts

    In this first part of the series, I showed you how to create a CSS sprite to implement a basic system of rollover buttons, which can be part of any navigation bar. As you probably realize, CSS sprites are a simple but extremely powerful concept, and can be used in other cases as well.

    Based on this situation, in the next article I'm going to show you how to use a CSS sprite to quickly develop a dynamic banner. Therefore, I don't think you're going to miss it!


    DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

       · In this first tutorial of a three-part series, you'll learn how to use CSS sprites...
       · Great job on this one, much like all of your other tutorials and articles I've read...
       · Thank you for the kind comments on my article. I truly appreciate them, and hope the...
     

    STYLE SHEETS ARTICLES

    - Image Replacement CSS Techniques
    - Using BlueTrip`s Success, Notice and Error C...
    - More Uses for the Thin and Caps CSS Classes ...
    - Styling Definition Lists with the BlueTrip C...
    - Styling Unordered and Ordered HTML Lists wit...
    - Using the BlueTrip CSS Framework`s Thin and ...
    - Adding Borders to Web Page Columns with Blue...
    - Introducing the BlueTrip CSS Framework
    - Using a Background Grid to Assist Web Page L...
    - Extending the Rule Of Thirds for Web Page La...
    - A Two-Column Web Page Layout Based on the Ru...
    - Using the Rule Of Thirds for Web Page Layout
    - Swapping Columns Using the Divine Ratio for ...
    - Using the Golden Ratio in Liquid Web Page De...
    - Fundamental Design Principles for Web Page L...







    © 2003-2009 by Developer Shed. All rights reserved. DS Cluster 6 Hosted by Hostway
    For more Enterprise Application Development news, visit eWeek