HTML5講習所

七転八倒、でも楽しい

WORK

JavaScript実戦演習(画像の切り替え)

2017/07/12

HTML5 レベル2 の試験勉強も教科書を順繰りに読んで問題演習を繰り返してもコードリーディング主体の問題には太刀打ちできそうにないですよね。そこで JavaScript のお勧め書籍(文末にリンクあります。)のサンプルコードを叩いて自分流にアレンジ(改悪かぁ?)して gengen33 ドットコムのTOPページに取り込んでおります。

今日はサムネイルの ”クリックによる画像の切り替え” です。

image

大きな画像に id属性、サムネイル画像に class属性をつけて、マッチする要素すべてを取得するには documentオブジェクトの querySelectorAllメソッドを使用するところがポイントですネ。

成果物はこんな感じ。

サムネイル画像のサイズが不揃いなのが私らしいとろですよね。

うーーーん。これをTOPページに載せるとなるとなるとサイズ調整が大変そうだなぁ……。

確かな力が身につくJavaScript「超」入門 (確かな力が身につく「超」入門シリーズ)

新品価格
¥2,678から
(2016/6/10 13:41時点)




-WORK
-