The common Sprite method
You make a div with a background image and declare all of the possible combinations of on and off
<![CDATA[
/* The Common Sprite Method */
#menu1 a div {
background-image: url(icons16-3col.gif);
background-repeat: no-repeat;
background-position: -240px 0px;
height: 16px;
width: 16px;
margin-right: 10px;
float:left;
}
#menu1 a.window div { background-position: -240px -20px; }
#menu1 a.search div { background-position: -240px -40px; }
#menu1 a.undo div { background-position: -240px -60px; }
#menu1 a.delete div { background-position: -240px -80px; }
#menu1 a.floppy div { background-position: -240px -100px; }
#menu1 a.window:hover div { background-position: -40px -20px; }
#menu1 a.search:hover div { background-position: -40px -40px; }
#menu1 a.undo:hover div { background-position: -40px -60px; }
#menu1 a.delete:hover div { background-position: -40px -80px; }
#menu1 a.floppy:hover div { background-position: -40px -100px; }
]]>
An alternate NON-JS Sprite method
You make a div with an IMG inside calling the sprite and position it.
<![CDATA[
/* An alternate NON-JS Sprite method */
#menu2 a div {
height: 16px;
width: 16px;
margin-right: 10px;
float:left;
overflow:hidden
}
#menu2 a div img {
position: absolute; left: -240px; top: 0px;
}
#menu2 a.window div img{ top: -20px; }
#menu2 a.search div img{ top: -40px; }
#menu2 a.undo div img{ top: -60px; }
#menu2 a.delete div img{ top: -80px; }
#menu2 a.floppy div img{ top: -100px; }
#menu2 a:hover div img{ left: -40px; }
]]>
An alternate jQuery Sprite method
Append the icon dynamically and have a defintion.
<![CDATA[
JS
$(document).ready(function(){
var spriteRow = 20;
var iconClass;
var iconPosition;
var icons = new Array(
"window",
"search",
"undo",
"delete",
"floppy"
)
$("#menu3 a").each(function(i){
var iconClass = $(this).attr("class");
iconPosition = (icons.indexOf(iconClass) + 1) * spriteRow;
$(this).prepend("<div><img src='icons16b.gif' style='top:-" + iconPosition + "px;' /></div>");
});
});
CSS
/* An alternate jQuery Sprite method */
#menu3 a div {
height: 16px;
width: 16px;
margin-right: 10px;
float:left;
overflow:hidden;
position: relative;
}
#menu3 a div img {
position: absolute; left: -240px; top: 0px;
}
#menu3 a:hover div img{ left: -40px; }
]]>
