jQueryで画像の差し替えを簡単に!ロールオーバー!

2014/02/26

こんにちは。
今回は、jQueryでロールオーバー(画像の差し替え)を作ってみたいと思います。
htmlとcssだけではロールオーバーで画像を差し替える事ができませんので、jQueryで簡単に差し替える方法です。
背景画像はhtmlとcssだけで差し替える事はできます。

 

まずはhtmlです。
imgタグにrolloverというクラス名を付けます。
image画像は二種類用意します。
ロールオーバー画像は最後に「_on」を付けて下さい。

 

続いてjQueryです。
headの中かBodyの一番最後にjQueryをダウンロードして読み込んで下さい。
その下に下記のソースをコピーしてjsファイルに貼付けて読み込んで下さい。
マウスオーバーした時にimgタグのrolloverというクラス名が付いている要素の画像のパスを取得して、その画像の最後に「_on」を付けた画像に差し替えます。
マウスアウトした時に同じように「_on」を取り除き画像が元に戻ります。

 

コアjQuery+プラグイン/jQuery UI 開発実践技法 (Programmer's SELECTION)
コアjQuery+プラグイン/jQuery UI 開発実践技法 (Programmer’s SELECTION)

 

いかがでしたか。これで簡単に画像を差し替える事ができますね。
以上でjQueryでロールオーバー(画像の差し替え)でした。

topへ戻る