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

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

用意した画像
画像1
aの注釈
画像2

bの注釈
クリックで1から2切り替えたい

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

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

スポンサーリンク

案1

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

試してみた

あれ?あっさり出来たなw

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

う~ん…どうすれば。

案2

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

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

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

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

画像だけページにしてみた

こちら

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

J-Querry使用

タイトルとURLをコピーしました