前の記事 ≪:画像の指定枠内をハイライト表示させて説明ページ作成に役立てられ...
次の記事 ≫:なかなか使えそうでNewなハイクオリティフォント20

1枚の画像でハイライトする画像メニュー作成が可能なjQueryプラグイン「imagineMenu」

2010年07月05日-はてなブックマーク

スポンサード リンク
[PR] 英単語を忘却曲線アプリを使って超効率よく記憶する方法
imagineMenu() jQuery plugin Tutorials Devoth.Design Edinburgh

1枚の画像でハイライトする画像メニュー作成が可能なjQueryプラグイン「imagineMenu」。
サイトのナビゲーションメニュー等を画像で構築していて、カーソルがあたった際にハイライトさせたいという場合がたまにあります。
onmousemoveなどで画像を切り替える方法もありますが、imagineMenuを使えば、次のような1枚の画像からメニューを構築出来ます。



カーソルを合わせるとハイライトされるメニューが出来ました。



CSSで色々と修飾できるようになったとはいえ、画像でメニューを構築したほうが自由度は増すので選択する場合もあると思いますが、このプラグインを使うことでハイライトも簡単に実現出来ます。
嬉しい点は、メニューをリストで綺麗に定義できるところ。

<ul id="firstNav">
<li><a href="#home">Home</a></li>
<li><a href="#blog">Blog</a></li>
<li><a href="#gallery">Gallery</a></li>
<li><a href="#contact">Contact</a></li>
</ul>

使い方は次のように、imagineMenu メソッドに 画像と、リンクの幅をそれぞれ渡してあげるだけです。

$('#firstNav').imagineMenu({image: 'img/menu.gif', link_widths: [105, 75, 120, 100]});

関連エントリ
関連の記事検索:jQuery, 画像, プラグイン
スポンサード リンク

By.KJ : 2010年07月05日 10:02 livedoor Readerで購読 Twitterに投稿

間違いの指摘をしていただける方はメール、あるいはTwitter/FBでお願いします(クリック)