jQuery WEB

Web道 「jQuery初期編」簡単にjQueryを使って画像のロールオーバーをしてみよう!

こんにちはNAOです。

今回はjQuery初期編と題してjQueryを始めたての方に色々な簡単な所から学んでいただき、少しでも役に立つところがあれば、是非取り入れてみてください。

それでは今回は

「画像のロールオーバー」

になります。

画像をロールオーバーとは?

ロールオーバーとは、画像にマウスを乗せた際、画像が他の画像に切り替わる、というものです。

 

ボタンをロールオーバーする手法として、jQueryを使わずにCSSだけでも実現可能です。
ただし、CSSで対応する場合は、画像ひとつずつに対して画像の設定をする必要があります。

 

●マウスが乗っていない状態

●マウスが乗っている状態

 

まずはHTMLとCSSでの作成の仕方を紹介します。

 

HTML
CSS

こちらで試す方は、画像はご自分のデザインに入れ替えてお試しください。

 
 
★解説     メニューの画像を、背景画像として設定しています。そして、hoverの時(マウスがメニューに乗っている時)には、画像を違う画像に差し替える、ということをしています。

 

HTML、CSSともにややこしく、また手間がかかっているのがわかります。
例えば、HTMLのliタグには、ひとつひとつクラスを付与しなければなりません。
また、CSS側でも、それぞれに対して、マウスオン時の画像とオフ時の画像、両方を設定しなければなりません。

 

これでは、ロールオーバーしたい画像が増えた際、CSSはどんどん長くなっていきます。
あまり効率的とはいえませんね。

 

そこで、jQueryを使って、ロールオーバーを実現していきます。

HTMLとCSSを準備する

 

jQueryを使用する準備として上記とは違ってHTMLは省略できていませんが、

CSSはかなり短く省略できています。

HTML
CSS

 

★解説 画像は背景画像として使うのではなく、画像自体にリンクを貼り、ボタンとして使います。また、CSSでは、liタグを回りこむように指定し、画像が横に並ぶようにしています。
 
 
ただし、今の状態ではメニューにマウスを乗せても、ロールオーバーは起こりません。
 

jQueryを記述しよう

 

そこでjQueryの登場ですよ🎵

ではjQueryを記述してみましょう。
 

ルールとして、
『マウスがオフの時は画像ファイル名の最後に「_off」が入る。オンの時には「_on」が入る。』
と決めておきます。
こうやってファイル名のルールを決めておき、そのルールにのっとって画像を準備しておくことで、jQueryでうまく扱えるようになります。

 

 

以下のようにロールオーバーして画像が変われば成功です。
 
 
 

まとめ

 
 
jQueryの詳しい解説は少し難しい面もありますので別に機会を作りたいと思います。
 
 
 
今回は長々とコードを書くことを解消するためにjQueryを取り入れてみると後々に楽にページ作成に取り組めるので是非実践してみてください。
 
jQueryの入り口として。
 
ありがとうございました。
 
 

ビジネスにもブログにも使いやすいWordPressテーマ

「WING(AFFINGER5)」

SEOや収益化に効果的な機能が豊富

記事ごとにAMP化を選択可能

簡単に設置出来るランキング機能をはじめとしたアフィリエイトを始めやすい設計

お得にご購入はコチラ

  • この記事を書いた人
NAO

NAO

NAOです。 DTPデザイナー、ワードプレスを愛するWEBデザイナー// 世の中のお得な情報、DTP、WEB、ブログに関して発信してまいります。 「使用ソフト」Illustrator Photoshop DreamWEAVER「使用プログラミング」HTML/CSS/ワードプレス/Jquery 「企業実績」販売促進に関係するアイテム作成 実績多数 「個人実績」 ココナラ 名刺作成・ロゴ作成 400件以上 広告 50件以上 販売実績

-jQuery, WEB

© 2021 TSUTAERU BLOG