‘JavaScript’ カテゴリーのアーカイブ

javascriptでメニューを画像化してみる

2008 年 10 月 5 日 日曜日

グローバルメニューの画像置き換えのお話。
通常、普通に画像を貼ってjavascriptでロールオーバーさせたり、
あるいはCSSの背景画像で実現する。
画像を貼る場合、HTMLがゴチャッとしてイマイチかっちょ悪い。
cssも画像off時や印刷時に見えなくなる弱点がある。
シンプルなHTMLとして

<ul id="menu">
	<li id="menu1"><a href="./">ホーム</a></li>
	<li id="menu2"><a href="./dir2/">メニュー2</a></li>
	<li id="menu3"><a href="./dir3/">メニュー3</a></li>
	<li id="menu4"><a href="./dir4/">メニュー4</a></li>
	<li id="menu5"><a href="./dir5/">メニュー5</a></li>
</ul>

を、javascriptで

<ul id="menu">
	<li id="menu1"><a class="active" href="./"><img alt="ホーム" src="/img/menu1_on.jpg" height="25" width="82"></a></li>
	<li id="menu2"><a href="./dir2/"><img alt="メニュー2" src="/img/menu2.jpg" height="25" width="82"></a></li>
	<li id="menu3"><a href="./dir3/"><img alt="メニュー3" src="/img/menu3.jpg" height="25" width="82"></a></li>
	<li id="menu4"><a href="./dir4/"><img alt="メニュー4" src="/img/menu4.jpg" height="25" width="82"></a></li>
	<li id="menu5"><a href="./dir5/"><img alt="メニュー5" src="/img/menu5.jpg" height="25" width="82"></a></li>
</ul>

に書き換える。
もちろんマウスオーバーやアクティブ時のロールオーバーも実装する。
サンプル
スクリプト
あ、jQuery使ってます。

(続きを読む…)