HTML5: CSS Sprites

See the demo.

 
<!doctype html> 
<html> 
<head> 
	<style type="text/css"> 
		.sprite {
			background:url(sheet.png);
			width:32px;
			height:48px;
		}
 
		.up { background-position-y: -7px;}
		.down { background-position-y: -102px;}
		.right { background-position-y: -55px;}
		.left { background-position-y: -151px;}
 
		.frame0 { background-position-x: -0px;}
		.frame1 { background-position-x: -36px;}
		.frame2 { background-position-x: -73px;}
		.frame3 { background-position-x: -107px;}
	</style> 
 
	<script type="text/javascript"> 
var counter=0;
setInterval(main_loop, 250);
function main_loop(){
  counter = (counter+1) % 3; // 0,1,2,3,0,1,2 ...
  document.getElementById("up").setAttribute("class", "sprite up frame"+counter);
  document.getElementById("down").setAttribute("class", "sprite down frame"+counter);
  document.getElementById("right").setAttribute("class", "sprite right frame"+counter);
  document.getElementById("left").setAttribute("class", "sprite left frame"+counter);
}
</script> 
 
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
	<title>CSS Sprites + JavaScript </title> 
</head> 
 
<body> 
	<img id="up" src="transparent.gif" /> 
	<img id="down" src="transparent.gif" /> 
	<img id="right"	src="transparent.gif" /> 
	<img id="left" src="transparent.gif" /> 
	<p>â€” We are not gifs!</p> 
</body> 
</html>

Credits and notes:

Sprites by me. See the Open Pixels project. CC-BY-SA 3.0 license
Code by me under GNU GPL 3.0 or CC-BY-SA 3.0 license
Thanks to the Creating easy and useful CSS Sprites tutorial by Alen Grakalic
Tested in Google Chrome 10.0.648.204. Worked or not worked in your browser? Please comment.

HTML5: CSS Sprites

2 Comments

Leave a Reply Cancel reply