JavaScriptのイベントを理解する

マウスクリックで画像を動的に表示する

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
マウスクリックで外部画像から動的にIMG要素をつくって、HTMLドキュメントに表示します。
講師:
09:57

字幕

このレッスンですはマウスイベントで 動的に画像の img 要素を作って HTML ドキュメントで表示したいと思います 今明るい木目の背景の上に サムネールがありますけれども これをマウスでクリックしますと 解像度の高い画像が表示されます そして背景は 木目の色がちょっと暗くなりましたね このような設定もあります では具体的にどういう行動を 使いたかったかを順に説明してみましょう この Dreamweaver で開いた HTML ドキュメントには まだ事実的な JavaScriptコードは書いていません Body にはサムネールの img 要素があってその上に div 要素空っぽなんですけどクラスとして 「overlay」という名前は付いています そして JavaScript コードを 書く準備として body 要素の OnLoad 属性で 関数を指定し その関数の外側に書いてあります ですから得に動くはないんですけど 現在の状態を確認します 「ファイル」から 「ブラウザーでプレビュー」しましょう サムネールがあって 木目の背景ちょっと暗いですね これが実はオーバーレイの効果です アルファの付いた 黒い色を重ねているということなんですね スタイルシートで確かめてみましょう 「style.css」 これが HTML ドキュメントで 意味を組まれていますけれでも その中の overlay というクラスなんですね 今 display : none という指定が コメントとして咲いているんですが これをコメント外しましょう そうする表示されませんから 先ほどの暗いアルファの掛かった 表示が爽やかになりますね ですから明るい木目の表示になります 一旦保存して そして今度は JavaScript を書き加えて サムネールをクリックしたら 先ほどのように暗いオーバーレイが出てくると display が none と言ったのを 元に戻すということですね 元に戻すというか 再表示するということになります ではこのコンソールの中に 書き加えて行きましょう eventListener を登録する エレメントを取ります element と document の quereySelector です 何を取っているかというと この img 要素ですね クラスが preview となっていますので ここで img の 「 . 」 preview と これで image 要素が取れます そしてこの取った image 要素 変数 element に対して addEventListener クリックしたいですから event は click と それからの名前は画像をロードなので loadImage にしましょう この関数を 定義します一応コピーを使っておきましょう コピーをして eventListener ですから eventObject を受け取ります そして中括弧始まり 中括弧閉じということで 今度はオーバーレイを取ります 名前も変数は overlay にしておきましょう そしてドキュメントの querySelector ですね これ ovrelay という クラスが付いているわけですから overlay としておきます これで この overlay のエレメントが 取れました今 display は none となっていますので そのスタイルの設定を変えましょう overlay をコピーして 持ってきまして style 要素の設定ですね それをプロパティは style です その display というプロパティを 今 none ですけれども 表示されるように block にしておきましょう これで一旦ファイルを保存して 確認してみます 「ブラウザーでプレビュー」です 最初は明るい状態 Display が none になっていますオーバーレイの クリックすると表示がされて アルファの付いた黒い 影の付いたようなオーバーレイができました 高解像のイメージを 読み込んでみたいと思います HTML ドキュメントが 収められたフォルダなんですが images の中に サムネールと高解像度の画像があります ダブルクリックして開いて リスト表示にした方が見えやすいですね こちらがサムネール サイズは小さいですねそしてこちらが 高解像度の画像でかなり大きいです 名前はサムネールの方が 「_tn」というのが付いていますから この _tn の取ったパスで 画像のパスを設定すれば 高解像度の画像ができるとなります サムネールのファイル のパスを取っていきましょう まず変数名は imgsrc としましょう そして これがそのサムネールの要素ですからそこから src とソースのパスを取ります 次に高解像度用の 要素を作ります 変数名は「highres」です そして document の createElement ということで作るのは img です そしたら今度は この後に変えていきましょう overlay に対して コピーにしますこれは コピーして その子供として今動的に作った appendChild ですね 動的に作った高解像度 「highres」を加えると これで HTML ドキュメント要素の 中に含まりますね 後はパスを正しく 設定してあげればいいです パスは highres の src ですね そこに 前の方に取っておいたサムネールのパス そしてサブストリング str で 尻尾の方の 「_tn」ですね .jpg も含めて取ってしまいますので imgsrc の全体の長さ から9文字引いた分ですね これで _tn 取れますのでそこに改めて .jpg としてあげばいいでしょう これで一旦保存して確認してみます 「ブラウザーでプレビュー」です クリックします なんかぼやっとしますね これは画像がブレるんですね この画像の位置それから 大きさの調整というのは css の方で設定してあります Dreamweaver で スタイルシートの方に切り替えまして このクラス bgimg これがサイズや大きさなどを指定している css のコードです このクラスを設定してあげればいいので では HTML ドキュメントに戻りまして ここで highres ですねそのクラスとして className 今確認した bgimg という 設定をします そして保存して ブラウザーでプレビューしています クリックをすると 正しい大きさで表示されました このレッスンでは マウスクリックのイベントで イメージの要素を 動的に作って それを HTML ドキュメントに加える という方法についてご説明しました

JavaScriptのイベントを理解する

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

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

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

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

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