JavaScript実戦演習（画像の切り替え）
2017/09/07
HTML5 レベル2 の試験勉強も教科書を順繰りに読んで問題演習を繰り返してもコードリーディング主体の問題には太刀打ちできそうにないですよね。そこで JavaScript のお勧め書籍（文末にリンクあります。）のサンプルコードを叩いて自分流にアレンジ（改悪かぁ？）して gengen33 ドットコムのTOPページに取り込んでおります。
今日はサムネイルの ”クリックによる画像の切り替え” です。
大きな画像に id属性、サムネイル画像に class属性をつけて、マッチする要素すべてを取得するには documentオブジェクトの querySelectorAllメソッドを使用するところがポイントですネ。
成果物はこんな感じ。
サムネイル画像のサイズが不揃いなのが私らしいとろですよね。
うーーーん。これをTOPページに載せるとなるとなるとサイズ調整が大変そうだなぁ……。
 |
|
確かな力が身につくJavaScript「超」入門 (確かな力が身につく「超」入門シリーズ) 新品価格 |
