jQuery_Autoでロールオーバーをシンプルに。 | ようこそここへ、イールです。

上記の広告は１ヶ月以上更新のないブログに表示されています。新しい記事を書く事で広告が消せます。

Dreamweaverでホームページ制作しているんですが、普通に画像のロールオーバーを付けていくとソースがどんどん煩雑になってしまいます。そこで、ロールオーバーが多いのに綺麗なソースのいろんなサイトを見させてもらったところ、jQueryというjavascriptライブラリを使っていたのですね。プラグインであるjQuery_Autoを使えば、本当にシンプルに、簡単に、画像をロールオーバーさせることが出来てしまいます。

①jquery.jsとjquery_auto.jsを読み込ませる。
②"image.jpg", "image_over.jpg"のようにロールオーバー後の画像は"_over"を付けたファイル名にする。
③<img～/>内に class="Hover"を指定する。

これだけです。これなら、サイトのいたる所の画像をロールオーバーに出来てしまいますね。ソースもシンプルに。FC2ブログ内の画像にも簡単に適用できました。

・~~jquery.jsとjquery_auto.jsのダウンロード~~
・参考にさせていただいたwebtech-walkerさんの記事
・jQueryについては「jQuery リファレンス」

【追記】
オフィシャルらしいところがつながらなくなってますね。jquery.jsとjquery_auto.jsはこちらなどでダウンロードできます。

児玉

【追記】2010/1/24
この記事の画像はロールオーバーにならなくなってました。なんでだろう・・・・。
最近だときっともっといい方法があると思いますので。