JavaScript: DOMを活用しよう

クリックした要素に対応した画像を加える

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
クリックした画像のパスを調べて、対応した大きい画像をHTMLドキュメントに加えます。
講師:
08:36

字幕

このレッスンでは画像をクリックしたときその画像のパスを調べて対応した大きい画像を要素として動的に作ってHTML ドキュメントに加えてみます。練習用の HTML ドキュメントなんですがトップページじゃなくてこの「 ARTISTS 」というページを使うことにします。現在画像をクリックすると動的に div 要素が造られてこのウィンドウのサイズぴったりにそれが表示されるという状態になっています。これを下敷きにしてさらにイメージですね、画像をこの上に表示したいと思います。画像は HTML ドキュメントと同じ階層の「 images 」というフォルダの中に纏められていて先程の画像の方は「 art 」という中にあります。そしてこれで2つでセットになっていまして名前が似ていますね。「 _tn 」閉じた方はサムネールの意味で小さい画像です。同じ名前なんですが「 _tn 」がないと大きい画像ということで画像は全て名前はこの様に揃った形でセットになっています。ですからクリックした画像が分かれば大きい画像のパスも知ることができるという仕組みになっています。Dreamweaver で HTML ドキュメントを開きました。 すでに書かれているJavaScript コードなんですがまずは addEventListener でクリックしたらという Listener の関数が加えられています。このクリックする対象となっているのは先程の画像を含んでいるul 要素というになっています。そしてクリックしたのが画像 IMG なのかあるいは li 要素の場合もあり得ます。それは引数のイベントオブジェクトからターゲットのプロパティで何がクリックされたのかを持ってきています。そして tagName というプロパティでそれが IMG なのか li なのかといったことが判別できるのでそれに基づいて要素を作ってCSS の設定の要領で大きさや位置、カラーなど定められた上でボディに子供として加えています。ですからクリックすると先程の様にグレーの大きいdiv 要素が表示されるということになっています。ではクリックした画像のパスはというとやはりこの targetのプロパティから知ることができます。ですのでこの eventObject の targetのプロパティですね。これは予め変数に取っておきましょう。「 target 」としまして、この部分は移動してしまいます、ドラッグして移動です。 そして変数に入れましたので変わってこの変数をこりドット名前にコピーで持ってくるということになりますね。そしてら今度はここで画像の src ソースですね、これを取ることができます。「 imageSrc 」としましょう、変数名ですね。そしてこの target コピーを持ってきます。の src ということでパスを拾うことが出来ます。これを「 console.log 」で表示してみることにしましょう。「 console.log 」の imageSrcコピーを持ってきて保存をして確認します。Chrome をリロードしてデベロッパーツールを表示しましょう。ウィンドウは少しスクロールします。そしてクリックします。そうするとオーバーレイの div 要素が表示されましたけれども、コンソールの方にパスが用意されていますね。ローカルでテストしますのでローカルのパスになっていますが知りたいのはこの一番最後のファイルネーム部分です。「 _tn.jpg 」とついていますのでこのお終いの7文字を削って改めて「 .jpg 」を付ければ大きい画像のパスになるということです。ではいったんこれをクリアしておきましょう。Dreamweaver に戻りましてこの「 console.log 」はコメントアウトします。 では順番にまずイメージ要素を作りましょう。「 largeImage 」ということで「 document.CreateElement 」ですね。今回はイメージですから「 img 」とします。「 largeImage 」をコピーしましてid をつけておきましょう。id は変数名と同じということでちょっと無精をしちゃいます、コピーを持ってきます。次にコピーを持ってきて、この src ですね、src に画像のパスを設定してあげればいいということになります。設定するのは imageSrc を元にしてこれは但し小さい方の画像のパスですね。ですから最後の7文字を削られていません。「 subsrt 」というメソッドでとこからどこまで先頭からというのは0カンマです。どこまでというと終わりから7文字を削るわけですからの imageSrc の長さコピーを持ってきてlength ですね。ただ7を引けば良いということですね。そしてさらにその後に改めて「 .jpg 」を足してあげます。これで大きい画像のパスになりました。今度は「 largeImage 」のコピーを持ってきて「 style 」ですね、これで CSS の設定を行います。 「 display 」を「 block 」にします。それから同じく「 style 」をさらに設定して「 position 」ですね、これは「 absolute 」にしましょう。さて設定は済んだので後はドキュメントに加えればいいですね。これは overlay に加えることにしましょう。overlay に対してコピーを持ってきて「 appendChild 」で「 largeImage 」をコピーを持ってきて引数に渡すということになります。ではいったん保存をして確認してみましょう。Chrome をリロードします。そして画像はまず左上からクリックしてみましょう。クリックすると大きい画像が表示されました。デベロッパーツールを閉じちゃいましょう。リロードします。2番目。リロードします。3番目とちょっと分からないですね。次は大丈夫そうですね。位置揃えとか大きさ揃えというのは別の作業になります。このレッスンではダイナミックに大きな画像のパスを読み込んで要素を設定してドキュメントに加えるという作業をしました。この作業でポイントとなるのはまず大きい画像と小さい画像名前を揃えておくということですね。その上でイベントオブジェクトの targetから src でパスを取ってきてそのパスを substr メソッドで編集した上でそして動的に作った image 要素、img の要素に対してsrc プロパティにそのパスを設定すれば良いということですね。 そして overlay に appendChild をして画像をドキュメントに表示したということです。

JavaScript: DOMを活用しよう

DOM(Document Object Model)はHTMLの中の要素とそのツリー構造を扱うための仕組みです。このコースではJavaScriptの基礎を学んだ方を対象に、DOMの基本的な操作方法について解説します。具体的にはDOMの要素やノードの調べ方、要素の属性の変更、ノードの追加方法などについて説明し、実際にインタラクティブに対応するページを作ります。

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

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

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

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