画像のロールオーバーをいとも簡単に設置できるJavascript
画像のロールオーバーの設定は、JavascriptやCSSで設置できますが、jQuery_Auto.jsを導入するだけでいとも簡単にロールオーバーの設定が出来ます。サンプルは、上記の画像にマウスをもっていくと分かります。
- jquery.jsとjquery_auto.jsを読み込むためのソースを挿入
- <script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery_auto.js"></script>
※javascriptをアップロードする場所に注意 - 画像を準備
- abc.jpg（もととなる画像）とabc_over.jpg（ロールオーバーしたときの画像）を用意。このとき「_over」が重要。こうしないとうまくいきません。
- imgのclassに”Hover”を指定
- <img src="abc.jpg" class="Hover" />
以上これだけ。簡単でしょ！ - ちょっと待て！jquery.jsとjquery_auto.jsはどこにあるの？
- そうですね。一番重要な部分ですが、検索してもらっても出てくると思いますがFireFoxに便利な拡張機能があって、他人のサイトが使用しているjavascriptやcssを丸除きできるというものがあります。（あくまで除くだけ(笑)）この拡張機能は後日記述します。
- JavascriptやCSSを丸覗きできるFireFox拡張機能
- 記事掲載しました → 他人のサイトのJavascriptやCSSを丸覗きできるFireFox拡張機能。FireFoxに導入して、私のBlogを覗いてみるとjquery.jsとjquery_auto.jsが丸覗きできます。
ロールオーバーをいとも簡単に設置する流れは以下の通り
