CSSのみ！】クリックで画像を切り替える

大きさが同じ2つの画像があって(実際に使いたいのは暗記プリント(空白)と～プリント(解答付き))

用意した画像

画像1

aの注釈

→

画像2

bの注釈

クリックで1から2切り替えたい

画像1を表示しておいて、マウスオーバー(モバイルはクリック)で画像2に切替えたい。

いつもどおりCSSのみで行く

目次(クリックでジャンプ)

案1

画像と同じ大きさでposition:relative;のボックスの中に画像1と画像2を絶対位置で同じ位置に貼り(html上では画像2を先に記述する)、画像1にマウスオーバー(クリック)でopacity:0;になるようなクラスを設定する。

あれ？あっさり出来たなｗ

チョマテヨ…この画像が全画面に近い大きい場合は、他の場所をクリックする(画像1に戻す)のは面倒くさいぞ。

う～ん…どうすれば。

画像クリックで切り替わるようにできないか？

CSSだけで実装しているこちらの御記事を参考に

うーん、だめだな。画像2から1に戻るときにページの一番上までスクロールしてしまう。

リンク先をコントロールしているようだから画像だけのページにすれば良いのかも。

トグル自体は成功した…が、スクロールしてしまうので、拡大して画像を見る用途では使い物にならない。