jQuery APIでWebサイトを演出しよう

ロールオーバーイメージ

全334コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
ロールオーバーが設定された画像に触れると、違う画像に差し替わるスクリプトを作ってみましょう。
講師:
07:49

字幕

このレッスンでは jQuery による画像のロールオーバーの作り方を学びます。ロールオーバーとは特定の画像にマウスが当たると違う画像にさし変わるというものです。それでは final のフォルダーを開いてfinal の中の index.html をChrome でドラッグアンドドロップそして開いてみましょう。そうしたらこの「あなたの旅にアイデアを」というキャッチコピー部分の画像にマウスが当たるとこのように黄色く塗った別の画像が現れるようになっています。本来ロールオーバーはリンクが設定されている画像などによく用いられますがこのようにエフェクトとしても用いることも可能です。それではフォルダーに切り替えてbegin のフォルダーをそのままSublime Text にドラッグアンドドロップで開きます。それではまず index.html をダブルクリック、そして今回実装するロールオーバーはサイト全体で使用する共通の JavaScript なのでjs フォルダーの中にある common.js をダブルクリックで開いておきます。そしてスクロールしてこのブロックに書いてあるものがロールオーバーのスクリプトのほぼ完成形になっているのですが少しずつ穴埋めをして確認をして行きましょう。 スクリプトそれぞれの意味を理解してみましょう。それではまずこのシングルクォーテーションに注目してください。実はこの中にはそれぞれ値が歯抜けになっています。ここに何が入るかということを少しずつ考えてみましょう。まず使われているメソッドに注目しましょう。. 何とかというのがメソッドです。まず .hover というのはマウスイベント、マウスが何かに触った時そして触った時に何かするというのがこの行です。触った時に何かする、そして ,functionこれは何かに触った後にその触ったものから外れた時というのを表すのが2行目です。そして3行目は each という繰り返しのメソッドなのですがこれは後で説明をしたいと思います。まずは画像にマウスをオンしなければいけないのでここには例えばイメージだと全てのイメージが範囲になってしまったりするので今回はクラスロールオーバーという風に設定をしております。これでロールオーバーというクラスを付けない限りはマウスオーバーが付きませんがその代わりクラスロールオーバーをどの画像に付けるかは自分で選ぶことができるようになりました。これにホバーで触ったら、触った物の attribute というメソッドです。 触ったものの属性を変更するというメソッドですので何を変えるか、画像が切り替わるということはソース属性が切り替わるということですね。そしてこのソース属性が同様にここにも入ります。そしてこのカンマがポイントで今のソース属性がこのカンマの後ろのソース属性に置き換わるというメソッドです。そしてカンマの後ろが少々複雑になっていましてこの replace置き換えるというメソッドですがこの後ろに書いてある記号群。これが正規表現というものです。これは検索や置換に用いられる書き方になっていて複雑なので少し説明の方は省かせてもらいますがこちらの . までが1文字以上のファイル名。そして . から後ろが jpg や png 等の拡張子をすべて選択する、という正規表現になっています。そしてそちらで取得したファイル名をこのように置き換えるという風な書き方になっています。そしてマウスが触ったら、ここに _on という画像を呼び出してほしいのでここに _on を追記しましょう。1 と 2 の間に _on を付ける。そしてマウスがホバーから外れた時に戻さないといけないのでここも同様にソース属性を入れてあげまして、そして今度は on になっているものを戻さなければいけないので前半が on そして後半が on がないという状態にしておきます。 そして each は画像をプリロード、つまり画像にマウスがのっかった時に画像を読み込んでしまうと画像が切り替わるまでにタイムラグが発生してしまうのでこの each の function で画像を先読みしておくことで一瞬でロールオーバー後の画像を表示させるということを実践します。これは括弧イメージという風に包むと、イメージタグを裏側で生成するという意味になるので表には出てこないけどこれでイメージを読むことができます。そしてやはりソース属性が主役なのでソース属性を入れてあげて後は画像名を_on で差し替えるという風に書いてあげます。ここで images フォルダーを見てみましょう。images フォルダーには幾つか画像が入っていますが今回のスクリプトはh2-copy.png をh2-copy_on.png に差し替えるというスクリプトです。つまり一度これを書いてしまえば差し替えたい画像の _on という画像を用意してその画像にクラス名ロールオーバーを付けるだけですべての画像に汎用的に用いることができます。ただ、あと最後の準備が残っていてhtml に切り替えたらメッセージの h2 というものを探しにいきましょう。 そうしたらこちらに img タグがあってh2-copy を発見しました。ではこの img に対してクラス属性を付けましょう。このクラスがないとロールオーバーのスクリプトが適用されませんのでrollover という風にクラス属性を付けたら上書き保存をして右クリックからOpen in Browser でブラウザーで見てみましょう。そしてマウスが重なると、無事に _on の画像が読み込まれるということを確認できました。後はこのスクリプトをうまく使って、サイト内で色んなロールオーバーを試してみてください。このレッスンではjQuery によるロールオーバーのスクリプトについて学びました。

jQuery APIでWebサイトを演出しよう

jQueryはJavaScriptを効率良く記述することができる、世界中で広く使われているライブラリです。APIとは外部のウェブサービスを自分のサイト内で利用できる仕組みのことです。このコースではjQueryやAPIの基本を学習したのち、jQueryのプラグインやGoogle APIなどの実践的な使い方について学びます。

2時間43分 (22 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2014年05月29日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。