jQuery画像の切り替え：ロールオーバーの設定

今回は、jQueryで画像の切り替え！ロールオーバーの設定方法について、実際にサンプルコードを用いて、詳しく記載していこうと思います。

画像リンクにマウスをのせたときに、画像を切り替える手法がよく使われますが、CSSのみで作ることも可能です。しかし、デメリットも全くないとはいえませんので、あえてjQueryでロールオーバーの設定を詳しく記載してみようと思います。

という事で、それでは今回はッ、

・CSSでの画像の切り替えメリットとデメリット
・attr()メソッドで画像の切り替え！

上記について記載していこうと思います…。

CSSでの画像の切り替えメリットとデメリット

Webサイトのナビゲーションやボタンなどで、画像にリンクを設定する場合も少なくありません。そしてマウスをのせたときに、画像の切り替えをおこなう手法がよく使われています。これを実装するには、jQueryを使わずにCSSのみで作ることも可能です。例えば下記のような方法が一般的になります。

サンプルCSSa.button{
display: block;
background: url(images/button.jpg) no-repeat 0 0;
width: 220px;
height: 65px;
text-indent: -9999px;
}
a.button:hover{
background-image: url(images/button_hover.jpg);
}

上記は、画像を背景に設定して、:hover疑似クラスで背景画像を入れ替えるサンプルCSSになり、教科書道理のCSSだと、text-indentが指定してあります。

CSSで画像の切り替えメリット

CSSで画像の切り替えるメリットとしては、CSSを理解していれば、比較的簡単に実装できることと思います。また、CSSで実装することから、動作や挙動もスムーズで、コード自体もシンプルに記載できる点が、メリットといえる事と思います。

CSSで画像の切り替えデメリット

上記サンプルCSSコードでは、テキストを非表示にするために、text-indent:-9999pxといった手法を記述してあります。一般的に良く使われる手法ですが、テキストを非表示にする方法は、テキスト隠しとみなされて、SEO的にはおすすめできない手法でデメリットといえる事になります。

そこで背景ではなくimg要素で画像を配置して、マウスをのせたときに画像を切り替える仕組みをjQueryで作成してみます。

attr()メソッドで画像の切り替え！

それではマウスをのせたとき、画像のsrc属性を変更する！画像を切り替えるのは、比較的簡単にできます。
img要素のsrc属性を変更するサンプルコードを下記に記載してみます。

サンプルHTML<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>Sample html</title>
<script src=”js/jquery.js”></script>
<script>
$(function(){
$(“.rollover”).hover(function(){
$(this).attr(“src”,”images/button_hover.jpg”);
},
function(){
$(this).attr(“src”,”images/button.jpg”);
});
});
</script>
</head>
<body>
・・省略・・
<a href=”#”><img class=”rollover” src=”images/button.jpg” alt=”お問い合わせ” width=”220″ height=”65″></a>
・・省略・・
</body>
</html>

使用する画像

button.jpg

button_hover.jpg

表示結果

これで画像が切り替えられている事が確認できることと思います。atrr()メソッドでは属性を操作することができますから、次のように記述すれば、画像を切り替えることができます。

マウスオーバー時$(this).atrr(“src”,”images/button_hover.jpg”);

マウスアウト時$(this).atrr(“src”,”images/button.jpg”);

しかしこのままでは、button.jpgとbutton_hover.jpgというファイル以外には使用できなくなります。とても汎用的なコードとはいえません。そこで次回以降JavaScriptのreplace()メソッドと正規表現というものを利用して、他のファイル名でも利用できるようなサンプルを記載してみます。

という事で、今回はjQuery画像の切り替え：ロールオーバーの設定について、atrr()メソッドを中心にサンプルコードを交え記載いたしました。

jQuery画像の切り替えひとつをとってみても、jQueryまだまだ奥が深いことをご理解いただけたことと思います。プログラミングは、どの言語を取ってみても、答えがひとつではなく、なにがベストかを考えながら、短くシンプルに記述することが重要で、短くシンプルに記述できるようになるまでは、結構な勉強量が必要になることと思いますので、ゆっくり、あせらず、じっくりと学ぶことをオススメいたします。

とりあえず、今回はここまで…。

お仕事のご依頼は↓コチラより…、それではまた次回…。