Useful Stuff About:

Using image "sprites" for rollover buttons

This image below is called a "sprite" which is defined as basically several images in a grid.
(Each individual part of this larger example image is 100x40px)

This sprite image is useful because:

You just have to create a SINGLE image not cluttering up your images folder with lots of images (in this case without sprites, you'd have to create 40 individual images for each variation)
It gets loaded one time but used several times so the load time is fast
You can use understandable CSS (rather than complicated, difficult to write/understand JavaScript) to make a particular part of the large image be displayed but the rest of the images in the grid to be hidden
You can also use understandable CSS (rather than complicated, difficult to write/understand JavaScript) to make another part of the image appear for its link state (in this case green), hover state (in this case yellow) when the cursor is hovering over the image, or its active state (in this case red) when the mouse is being pressed down over the image

Here is an example of how to use these sprite images. Try hovering over an image and also clicking and holding down the mouse over an image.

Download the example image above here.

Here's the code that makes this work:

HTML (copy and paste inside the <body> tag)


  
<div id="allButtons">
    <div class="btnDiv" id="btnDiv1">
        <a href="#">
            <img src="images/allButtons.png" class="btnImg" id="btnImg1">
        </a>
    </div>
    <div class="btnDiv" id="btnDiv2">
        <a href="#">
            <img src="images/allButtons.png" class="btnImg" id="btnImg2">
        </a>
    </div>
    <div class="btnDiv" id="btnDiv3">
        <a href="#">
            <img src="images/allButtons.png" class="btnImg" id="btnImg3">
        </a>
    </div>
    <div class="btnDiv" id="btnDiv4">
        <a href="#">
            <img src="images/allButtons.png" class="btnImg" id="btnImg4">
        </a>
    </div>
    <div class="btnDiv" id="btnDiv5">
        <a href="#">
            <img src="images/allButtons.png" class="btnImg" id="btnImg5">
        </a>
    </div>
    <div class="btnDiv" id="btnDiv6">
        <a href="#">
            <img src="images/allButtons.png" class="btnImg" id="btnImg6">
        </a>
    </div>
    <div class="btnDiv" id="btnDiv7">
        <a href="#">
            <img src="images/allButtons.png" class="btnImg" id="btnImg7">
        </a>
    </div>
</div>

CSS (copy and paste into the external style sheet)


  
 /*This block is for the container that holds
 all the smaller div containers for the each button.*/
 #allButtons {
     position: relative;
     height: 40px;/*adjust to your specific needs*/
     width: 1000px;/adjust to your specific needs*/
 }
 
/*This sets the width and height of each button image */
 .btnImg {
     width: 1000px;/*adjust to your specific needs*/
     height: 120px;/*adjust to your specific needs*/
     cursor:pointer;
 }

 /*This sets the rollover effect by shifting 
 the hovered/clicked image UP to reveal the desired version */
 .btnImg:link {/*normal link without ever clicking on it*/
     margin-top: 0px;
 }
 .btnImg:hover {/*hover is when the mouse is hovering over the image, adjust as needed*/
     margin-top: -40px;/*negative shifts image UP, positive would shift image DOWN*/
 }
 .btnImg:active {/*active is when the mouse is being pressed down, adjust as needed*/
     margin-top: -80px;
 }

 /*This allows each div holding a sprite to position itself 
 to the right or bellow of the previous div.*/
 .btnDiv {
     width:100px;
     height:40px;
     overflow: hidden;/*hides the part of the image not in the div */
     float:left;/*allows the div to reposition to right or below */
 }

 /*This block positions the images in particular divs 
in the right location to display the desired image.*/
 #btnImg2 {
     margin-left: -100px;/*negative shifts image LEFT, positive would shift image RIGHT*/
 }
 #btnImg3 {
     margin-left: -200px;
 }
 #btnImg4 {
     margin-left: -300px;
 }
 #btnImg5 {
     margin-left: -400px;
 }
 #btnImg6 {
     margin-left: -500px;
 }
 #btnImg7 {
     margin-left: -600px;
 }