CSS Spriteの手間を軽減するJavaScript「AutoSprites - A jQuery Menu Plugin」

CSS Spriteを利用している方も多いと思いますが、その記述・メンテナンスが少し面倒に感じなくもありません。
jQueryプラグインのAutoSprites - A jQuery Menu Plugin - New Media Campaignsを使用するとその手間が軽減されます。

sponsors

使用方法

AutoSprites - A jQuery Menu Plugin - New Media Campaignsからファイル一式をダウンロードします。
また、こんな画像と

こんな記述があるとします。

<ul id="nav"> 
	<li id="home"><a href="#">Home</a></li> 
	<li id="local"><a href="#">Local Industry</a></li> 
	<li id="higher"><a href="#">Higher Education</a></li> 
	<li id="comm"><a href="#">Our Community</a></li> 
	<li id="news"><a href="#">News</a></li> 
</ul>
これに対し、以下のような書きます。

<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="autosprites.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$('#id名').autosprites({
		offset: '72px' //画像の高さ
	});
});
</script>
また、CSSの記述は以下で済むことになります。

<style>
#nav { width: 615px; height: 72px; background: url('horiz_sprites.gif') no-repeat; }
#nav li { position: absolute; left: 0; height: 72px;list-style:none; }
	#nav #home { width: 82px; left: 0px; }
	#nav #local { width: 146px; left: 82px; }
	#nav #higher{ width: 162px; left: 228px; }
	#nav #comm { width: 143px; left: 390px; }
	#nav #news { width: 82px; left: 533px; }
#nav li a { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 72px; text-indent: -9999em; }
</style>
jsをオフにすると効かなくなるので、手間を省くか、ユーザビリティを犠牲にするか判断が問われます。

サンプル


Javascriptサンプルページ一覧
skuare.net