JavaScriptのイベントを理解する

イメージを動的にDOM要素に加えて表示する

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
画像ファイルから動的につくったIMG要素を、HTMLドキュメントに加えて表示します。
講師:
09:20

字幕

このレッスンでは 外部の画像ファイルから img要素のオブジェクトを 動的に作って htmlドキュメントの中に 差し込んで表示してみたいと思います 今画面には9つの サムネールがありますえけども その1つ例えば右下ですね にマウスポインターを重ねると これまでなかった 解像度の高い画像を これは読み込んで イメージのオブジェクトを作り htmlドキュメントの中に 表示しているんですね この方法についてご説明したいと思います 今ドリームウィーバーCCで開いている htmlドキュメントには まだ画像の差し込みは行われていません ただ要素を差し込むということだけは 先に1つやってあります 何かと言いますと div要素 を空のまま1つ加えてあります ざっと確認しておきますけれども まず 要素を加えるための イベントリスナー を登録する要素なんですが gridという名前の このul要素を取り出して それに対して アドベントリスナーで マウスが重なったら リスナー関数を実行しましょうということで 重なった要素の ターゲットプロパティですね 重なった要素を取り出し それがimgのタグを 持っていることを確認したうえで div要素を クリエートエレメントのメソッドで作り そしてその img要素の親ですね ペアレントノード リストに対して アペンドチャイルドして そのdiv要素を加えています もちろん空のdiv要素ですから 画面には見えませんけども 一応確認してみましょう ファイルをブラウザーでプレビューします 画面上は見えませんのでここは 要素の検証ということで ボディ要素、div要素を開け その中のul要素 これはgridですね ここにイベントリスナーが 入っているわけですが 1番右下の画像 ここですね 今li要素の中には imgしかありませんけども ポインターを重ねると div要素が加わりました このdiv要素の中に またimg要素を 外部の画像ファイルから読み込んできた イメージオブジェクトを作って 加えようということです javascriptコードを 書き加えましょう エレメントを作る 操作は基本的に一緒ですね イメージオブジェクトの エレメントを作ります プレビュー imgとしましょう そしてドキュメントに対して クリエートエレメント ここまでは同じです 2つ来るのは今度は img の要素ですね そして ここへdiv要素を加えているんですが そのdiv要素の中に imgの要素を加えたいので 仕組みは一緒ですけれども このエレメントという変数に入っている imgの要素に対して アペンドチャイルド そして イメージのオブジェクトを加えます もちろんここにはまだ 何も指定していませんから 実際には空っぽのオブジェクトということで 相変わらず表示はされないんですけれども ここまでちゃんと動いているか 確認してみましょう ファイルを保存して ブラウザーでプレビューです 要素を検証します そして 先ほどと同じくやはり リスト要素、エラー要素にしましょう ここにポインターを重ねると div要素が加わりますが その中にさらに imgが空っぽのまま加わってると ですからここに正しい設定 ソースであるとかそうしたものを 加えてあげれば表示されると ちょっと左の画面がおかしくなっていますが これは最終的にはきちんと 直りますので 今は気にしないでください さて今開いていた htmlドキュメントはこれです そしてこのimagesという フォルダーの中に画像ファイルが 入ってくるんですけども開けてみます いっぱいありますね これちょっと表情を変えて この構造なんですけども 同じ名前でちょっとだけ違う ファイルがいっぱい並んでいますね ここは1つの仕組みなんですが 解像度の高い画像とサムネールと 基本的に名前は同じにして アンダースコアtn こちらはサイズが小さいです アンダースコアtnのないもの こっちのはサイズが大きいですね ですから大きい画像と小さい画像 名前をセットにして サムネールは アンダースコアtnがつくと ですからアンダースコアtn を取ったパスを設定してあげれば そのサムネールの解像度の高い 画像のパスが取れる ということになるわけです ではそのように htmlドキュメントの方の javascriptコードを 変えてみましょう ではまずマウスポインターを重ねた ターゲットのimg要素から slcの属性の値 パスを取っておきましょう ではこの後に 変数名は imgsrcとしましょう そして ターゲットから取ってきます コピーしちゃいます そのsrcですね これでパスが取れました そしたら このパスからおしまいの アンダースコアを含めて3文字なんですが .jpgまで含めて取ってしまって 後で.jpgを加える っていう風にしますので 後ろから7文字 削ってしまうことになります では文字を削って このプレビュー imgですね ここのsrcに設定すればいいので これを持ってきます そしてsrcと そこに imgsrcから取ってきた 文字列の サブストリングを取ります substrという関数の方ですね このメソッドを使います そして頭から この文字全体の 長さ、lengthです 7文字除いた部分を 取ってきます そうするとアンダースコアtn が取れた値 .jpgまで含めて取れた状態で 取れますのでそこに .jpgと加えればいいですね プロパティの名前がちょっと違っていますね lengthです では保存して確認します ファイルを保存して ブラウザーでプレビューです マウスポインターを重ねますと 下に大きな画像ファイルが出てきました ちょっと位置を変えないといけませんね この部分は CSSで変えてしまいます htmlドキュメントで 設定しているスタイルシート style.cssとあるんですが ここにはすでに 実は設定が作ってあります 見てみましょう ちなみにマウスポインターを 重ねた時に 虫メガネのような カーソルに変わりましたね あれは実はここで imgに重ねた時の 設定がしてあります そしてこんなpngファイルですね pngファイルで 虫メガネのカーソルにしたいわけですけども 下の方に プレビューというクラス これが解像度の高い画像に対して 設定したいクラスなんですけどそこで 位置であるとか それから重ね順ですね 手前の方に持ってくる そして大きさといったものが すでに設定してありますので このプレビューというクラスを 指定してあげればいい ということになります ですので ここで エレメントに対して クラスネーム 今見たプレビューです と指定してあげれば きれいになるように作ってあります では保存をして 確認をしてみましょう ブラウザーでプレビューです マウスポインターを重ねますと ちゃんとサムネールの右側に 大きい画像が表示されます 一旦表示したものは消えないので どんどん表示が重なってしまうんですが とりあえずはダイナミックに サムネールに対応した画像を 高解像度の画像を読み込んで表示する というところまではできました このレッスンでは img要素のオブジェクトを オブジェクト それをエレメントとして加え さらにそのソースを設定することによって 画像をダイナミックに htmlドキュメントの中に 表示するという方法について ご説明しました

JavaScriptのイベントを理解する

あらかじめ決められた出来事が起こったときに発生するメッセージをJavaScriptでは「イベント」と言います。このコースではJavaScriptの基礎を学んだ方を対象に、マウス操作やデータの読み込みなどよく使われるイベントについて解説します。また関数の定義や処理の仕方などを実際にスクリプトを書きながら説明します。

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

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

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

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