JavaScript is disabled! Please enable JavaScript in your web browser!

Freestyle Academy of Communication Arts & Technology

1299 Bryant Ave, Mt. View, CA 94040 T 650-940-4680   F 650-961-1346
2 Required Classes: English and Design 3rd/Elective Class:  + Animation or Digital Media or Film

Font Size

+

-

Reset

Back to list of all examples

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:

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;
}