画像を切り替えて点滅しているように見せたい

Question

htmlを使って画像を切り替えて点滅してるようにみせたい。
画像Aをクリックしたら、画像Bと画像Cが交互に切り替わり点滅してるように見せたいです。そしてもう一度クリックすると画像Ａに戻るようにしたいです。
画像ＡはＰＨＰで画像を呼び出していて、複数ある状態です。
今は画像Ｃのうえに画像Ｂを重ねて画像Ｂを表示、非表示を繰り返しています。
複数ある画像Ａにクリックの反応はありますが、一箇所しか画像が切り替わらないです。

PHPでの変数が手間なのでjavascriptは使いたくなかったのですが、つかうべきなのでしょうか。

<div class="image-div01">
<img src="" alt="">
<img src="" alt="" class="animation">
<input type="checkbox" id="disappear">
<label for="disappear"><img src="" alt=""></label>	
</div>

.image-div01 input{
display:none;
}
.image-div01 input:checked+label{
display:none;
}
.image-div01{
position:relative;
}
.image-div01 img:nth-of-type(1){
position:absolute;
}
.image-div01 img:nth-of-type(2){
position:absolute;
}
/*1sを変えると表示長さが変わります。*/
.animation{
animation: my_anime01 1s infinite step-end;
}
@keyframes my_anime01 {
0% {
opacity:1;
}
50% {
opacity:0;
}
100% {
opacity:1;
}
}

Answer 1

abcが複数ある辺りの説明が足りないと思います

※absolute処理をするために.wrapに任意の高さを指定しています。
画像サイズに合わせて適宜調整ください

<style>
div.wrap{
height:150px;
}
[type=radio].a,[type=radio].bc{
display:none;
}
[type=radio].bc:not(:checked) ~ label.a,
[type=radio].a:not(:checked) ~ label.bc{
display:none;
}
[type=radio].a:checked ~ label.bc img.b{
  animation: anime1 2s infinite;
}
[type=radio].a:checked ~ label.bc img.c{
nimation: anime2 2s infinite;
}
label.bc img{
position:absolute;
}
@keyframes anime1{
  from,50%{ z-index: 1;}
  50.1%,to{ z-index: 0; }
}
@keyframes anime2{
  from,50%{ z-index: 0;}
  50.1%,to{ z-index: 1; }
}
</style>
test
<div class="wrap">
<input type="radio" name="abc1" value="a"  id="a1"  class="a">
<input type="radio" name="abc1" value="bc" id="bc1" class="bc" checked>
<label for="a1" class="a">
<img src="https://placehold.jp/ff0000/00ffff/150x150.png?text=A">
</label>
<label for="bc1" class="bc">
<img src="https://placehold.jp/00ff00/ff00ff/150x150.png?text=B" class="b">
<img src="https://placehold.jp/0000ff/ffff00/150x150.png?text=C" class="c">
</label>
</div>
test
<div class="wrap">
<input type="radio" name="abc2" value="a"  id="a2"  class="a">
<input type="radio" name="abc2" value="bc" id="bc2" class="bc" checked>
<label for="a2" class="a">
<img src="https://placehold.jp/ff0000/00ffff/150x150.png?text=A">
</label>
<label for="bc2" class="bc">
<img src="https://placehold.jp/00ff00/ff00ff/150x150.png?text=B" class="b">
<img src="https://placehold.jp/0000ff/ffff00/150x150.png?text=C" class="c">
</label>
</div>
test

調整

<style>
div.wrap{
height:150px;
}
[type=radio]#a,[type=radio]#bc{
display:none;
}
[type=radio]#bc:not(:checked) ~ .wrap label.a,
[type=radio]#a:not(:checked) ~ .wrap label.bc{
display:none;
}
[type=radio]#a:checked ~ .wrap label.bc img.b{
  animation: anime1 2s infinite;
}
[type=radio]#a:checked ~ .wrap label.bc img.c{
nimation: anime2 2s infinite;
}
label.bc img{
position:absolute;
}
@keyframes anime1{
  from,50%{ z-index: 1;}
  50.1%,to{ z-index: 0; }
}
@keyframes anime2{
  from,50%{ z-index: 0;}
  50.1%,to{ z-index: 1; }
}
</style>
test
<input type="radio" name="abc1" value="a"  id="a"  class="a">
<input type="radio" name="abc1" value="bc" id="bc" class="bc" checked>
<div class="wrap">
<label for="a" class="a">
<img src="https://placehold.jp/ff0000/00ffff/150x150.png?text=A">
</label>
<label for="bc" class="bc">
<img src="https://placehold.jp/00ff00/ff00ff/150x150.png?text=B" class="b">
<img src="https://placehold.jp/0000ff/ffff00/150x150.png?text=C" class="c">
</label>
</div>
test
<div class="wrap">
<label for="a" class="a">
<img src="https://placehold.jp/ff0000/00ffff/150x150.png?text=A">
</label>
<label for="bc" class="bc">
<img src="https://placehold.jp/00ff00/ff00ff/150x150.png?text=B" class="b">
<img src="https://placehold.jp/0000ff/ffff00/150x150.png?text=C" class="c">
</label>
</div>
test

※更新されていなかったので再更新

Comments

[minomonnta]

回答ありがとうございます。
今回は画像Ａ（１）、画像Ａ（２）があって片方だけをクリックしても画像Ａ（１）、画像Ａ（２）両方とも点滅するようにしたいです。

[yambejp]

ということはB/Cも両方点滅していてもクリックしたら両方Aに戻るのですね？
調整版を確認ください

[yambejp]

調整版が表示されてなかったので更新しました

Answer 2

HTML上でidは重複できません。個別のidにするか、下記のようにしてみてください。

<label><input type="checkbox"><img src="" alt=""></label>