noteクリッカブルマップでのロールオーバーHTMLJavaScriptjQuery2010.01.16SEO的にはあまり推奨されない?と言われるクリッカブルマップですが、時には便利な場合も。ロールオーバーさせるのにCSSでは無理があります。そこで非常に簡単な方法ではありますが、javascriptを使ってロールオーバーさせる方法を紹介します。※2011.09.01:内容の再構成とjqueryでの方法を追加しました。通常の画像とロールオーバー時の画像を用意します。通常の画像ロールオーバー画像HTMLでクリッカブルマップの作成クリッカブルマップを作成出来るHTMLエディタ、ソフトなどでHTMLを生成します。今回はDreamweaverで作成しました。今回の例では以下のソースが生成されます。/></map>最もシンプルな方法javascriptで関数を作成します。マウスオーバー/マウスアウトで引数で指定した画像に入れ替えるだけのシンプルなスクリプトです。imgPath;}HTML側にはマウスオーバー/マウスアウト時の関数の引数に画像パスをそれぞれ記述します。/></map>jQueryを利用した方法jQueryのhover()を利用して処理をします。あるロールオーバーの処理の仕方とほとんど同じです。今回はクリッカブルマップに特化してますが、img、aに任意のclassを指定し、セレクタに追加すれば汎用なロールオーバー処理も可能です。拡張子もgif/jpg/jpeg/xbm/pngに対応してます。