skuare.netはJavaScriptライブラリのjQuery,mootools,prototypeのプラグインを中心にWebサイト構築に関する技術を試す個人サイトです

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

｜ ｜ ｜ ｜ ｜ ｜ ｜

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

使用方法
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(){
$('#nav').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をオフにすると効かなくなるので、手間を省くか、ユーザビリティを犠牲にするか判断が問われますね。
CSS Spriteの手間を軽減するJavaScript「AutoSprites - A jQuery Menu Plugin」サンプル

記事作成：2009年10月29日

前の記事：テーブルの内容をグラフで表示するJavaScript「graphTable」
次の記事：JavaScriptでtwitterぽいインフォメーションバーを作る「jQuery notify bar」