今回は、jQueryで画像の切り替え！ロールオーバーの設定方法について、実際にサンプルコードを用いて、詳しく記載していこうと思います。
画像リンクにマウスをのせたときに、画像を切り替える手法がよく使われますが、CSSのみで作ることも可能です。しかし、デメリットも全くないとはいえませんので、あえてjQueryでロールオーバーの設定を詳しく記載してみようと思います。
という事で、それでは今回はッ、
上記について記載していこうと思います...。
Webサイトのナビゲーションやボタンなどで、画像にリンクを設定する場合も少なくありません。そしてマウスをのせたときに、画像の切り替えをおこなう手法がよく使われています。これを実装するには、jQueryを使わずにCSSのみで作ることも可能です。例えば下記のような方法が一般的になります。
上記は、画像を背景に設定して、:hover疑似クラスで背景画像を入れ替えるサンプルCSSになり、教科書道理のCSSだと、text-indentが指定してあります。
CSSで画像の切り替えるメリットとしては、CSSを理解していれば、比較的簡単に実装できることと思います。また、CSSで実装することから、動作や挙動もスムーズで、コード自体もシンプルに記載できる点が、メリットといえる事と思います。
上記サンプルCSSコードでは、テキストを非表示にするために、text-indent:-9999pxといった手法を記述してあります。一般的に良く使われる手法ですが、テキストを非表示にする方法は、テキスト隠しとみなされて、SEO的にはおすすめできない手法でデメリットといえる事になります。
そこで背景ではなくimg要素で画像を配置して、マウスをのせたときに画像を切り替える仕組みをjQueryで作成してみます。
それではマウスをのせたとき、画像のsrc属性を変更する！画像を切り替えるのは、比較的簡単にできます。 img要素のsrc属性を変更するサンプルコードを下記に記載してみます。
これで画像が切り替えられている事が確認できることと思います。atrr()メソッドでは属性を操作することができますから、次のように記述すれば、画像を切り替えることができます。
しかしこのままでは、button.jpgとbutton_hover.jpgというファイル以外には使用できなくなります。とても汎用的なコードとはいえません。そこで次回以降JavaScriptのreplace()メソッドと正規表現というものを利用して、他のファイル名でも利用できるようなサンプルを記載してみます。
という事で、今回はjQuery画像の切り替え：ロールオーバーの設定について、atrr()メソッドを中心にサンプルコードを交え記載いたしました。
jQuery画像の切り替えひとつをとってみても、jQueryまだまだ奥が深いことをご理解いただけたことと思います。プログラミングは、どの言語を取ってみても、答えがひとつではなく、なにがベストかを考えながら、短くシンプルに記述することが重要で、短くシンプルに記述できるようになるまでは、結構な勉強量が必要になることと思いますので、ゆっくり、あせらず、じっくりと学ぶことをオススメいたします。
とりあえず、今回はここまで...。
お仕事のご依頼は下記より...、それではまた次回...。
