クリックイベントについて

画像の中央にある、三つの勾玉のイラストにクリックイベント"回転"をつけたいです。

イラストには赤、緑、黄色の三つにイメージマップを割り当てています。
黄色には左回転、赤には右回転、緑には左回転をつけたいです。

html
1<!-- magatama -->
2                        <div id="mt-box">
3                            <img src="img/magatama.png" usemap="#ImageMap" alt="" />
4                                <map name="ImageMap">
5                                <area href="" class="mt-green" shape="poly" coords="114,34,127,27,146,24,161,25,177,28,193,33,216,45,231,57,246,71,257,90,268,115,274,135,275,150,275,161,274,171,273,179,267,166,264,156,258,147,252,140,242,132,236,128,215,121,197,122,188,125,174,128,152,136,141,136,130,133,124,132,117,129,109,122,101,111,94,99,92,85,92,76,94,66,99,52,106,43,110,38,114,36,114,36" alt="緑" />
6                                <area href="" class="mt-yellow" shape="poly" coords="63,245,68,249,73,253,83,259,95,265,110,270,122,273,138,276,152,277,161,277,173,275,184,273,202,267,214,260,225,253,232,245,243,237,249,230,257,217,261,210,266,196,268,185,265,168,262,159,257,152,252,146,240,137,230,132,216,129,203,128,195,130,186,132,176,138,171,142,167,148,162,154,159,161,156,170,154,181,152,189,149,199,147,206,144,214,141,221,133,230,128,234,120,239,112,243,99,247,92,247,81,247,74,246,69,246,64,244,83,247" alt="黄色" />
7                                <area href="" class="mt-red" shape="poly" coords="106,34,98,35,91,38,85,41,79,45,75,48,69,53,63,57,61,59,57,62,52,71,47,76,45,78,36,92,34,101,32,104,28,116,25,125,24,136,22,149,23,160,24,167,25,177,27,184,28,189,32,201,37,211,40,216,44,224,48,227,54,232,61,236,67,238,78,241,90,242,102,241,109,238,114,235,119,232,123,229,126,226,132,221,136,215,141,207,144,198,144,192,146,187,144,176,145,203,146,184,143,170,139,164,137,159,130,149,123,142,119,140,111,132,108,129,105,125,96,117,92,109,89,99,87,86,89,70,90,63,92,58,93,54,96,49,98,44,101,41,104,36,104,36" alt="赤" />
8                                </map>
9                        </div>

css
1/* magatama */
2#mt-box{
3    height: 25%;
4    text-align: center;
5    position: absolute;
6    top: 20%;
7    animation: fluffy 3s ease 1s infinite alternate;
8}
9@keyframes fluffy{
10    0% { transform:translateY(-5px) }
11    100% { transform:translateY(5px) }
12}
13.mt-yellow:active{
14    transform: rotate(-45deg);
15}
16.mt-red:active{
17    transform: rotate(-45deg);
18}
19#mt{
20    height: 100%;
21    outline: none;
22}

また、勾玉三つにはareaタグにhrefを割り当てていて、クリックイベントが終えてから読み込みさせることは可能でしょうか？

Lhankor_Mhy

2021/01/19 01:24 編集

こんにちは。 2点補足願います。「勾玉三つにはaタグを割り当てていて」とは、具体的にはどのような状態ですか？　コードでご提示いただきたいのですが、可能ですか？「クリックイベントが終えてから読み込みさせる」とは、具体的にはどういう機能ですか？

yambejp

2021/01/19 01:47 編集

どこを中心に回転するのでしょうか？それぞれが独立した回転なのでしょうか？（※追記：画像が一枚ですから独立しては無理でしたね）それとも連携して回転するのでしょうか？（手書きでいいので図示していただいたほうがわかりやすいと思います）

DrsriN

2021/01/19 02:05

Lhankorさん＞＞コードに関しましては、htmlの中に掲示してありますのでご覧ください。クリックをすると通常だと1sないし数秒ですぐにリンクを読み込んでしまいます。ですが、クリックイベントのアニメーションを再生した後にリンクを読み込みさせたいです。 yamabeさん>>３色の勾玉は、一つの画像になっていて、そこにイメージマップを割り当てています。三つの勾玉の中心を中心点として回転させたいです。手書きの画像を貼り付けておきます！

Lhankor_Mhy

2021/01/19 02:09

「コードに関しましては、htmlの中に掲示してありますのでご覧ください」とのことですが、HTMLにaタグは見当たりませんでした。割り当てているaタグをご提示ください。

DrsriN

2021/01/19 02:12

すみません、aタグではありませんでした... areaタグにhrefをつけています。

DrsriN

2021/01/19 02:15

yamabeさん>>編集画面で手書きの画像を貼ろうとしてるのですが、何故だか貼れません...

Lhankor_Mhy

2021/01/19 02:15

「クリックイベントのアニメーション」とは fluffy のことですか？

Lhankor_Mhy

2021/01/19 02:16

あ、違うか。新たに設定をするのですね。理解しました。

DrsriN

2021/01/19 02:35

そうです！

行動規範の内容に同意します

回答3件

ベストアンサー

右回転・左回転はこんな感じです。

css
1#mt-box.left {
2    animation: left 1s linear;
3}
4#mt-box.right {
5    animation: right 1s linear;
6}
7@keyframes right {
8    to {
9        transform: rotate(360deg);
10    }
11}
12@keyframes left {
13    to {
14        transform: rotate(-360deg);
15    }
16}

クリックして回転をさせるには、イベントリスナを使うといいでしょう。

js
1document.querySelector('.mt-green').addEventListener('click', e =>{
2  // たとえば
3  target.classList.add('left');
4});

リンクをクリックしたときに異動しないようにするには、preventDefault()を使うのがいいでしょう。

js
1e.preventDefault();

アニメーションを終えてから何かをするには、animationendイベントを拾うのがいいでしょう。

js
1target.addEventListener('animationend', () => {
2  // たとえば
3  location.href = href;
4});

参考：
HTMLElement: animationend イベント - Web API | MDN

投稿2021/01/19 04:17

Lhankor_Mhy

総合スコア36960

DrsriN

2021/01/19 04:35

回答ありがとうございます！追加の質問までご回答いただきありがとうござます！助かりました！

行動規範の内容に同意します

html
1<html>
2<head>
3<style>
4@keyframes clockwise {
5  0%{ transform:rotate(0);}
6  100%{ transform:rotate(360deg); }
7}
8
9@keyframes counter {
10  0%{ transform:rotate(0);}
11  100%{ transform:rotate(-360deg); }
12}
13</style>
14</head>
15<body>
16<img src="https://qiita-image-store.s3.amazonaws.com/0/188554/24487a0d-e5d3-a543-adaa-501714fa1f52.png" usemap="#ImageMap">
17<map name="ImageMap">
18  <area href="javascript:a();" coords="57,99,47" shape="circle">
19  <area href="javascript:b();" coords="154,97,44" shape="circle">
20</map>
21
22<script>
23const a = () => {
24  document.querySelector('img').style.animation='1s linear clockwise';
25};
26
27const b = () => {
28  document.querySelector('img').style.animation='1s linear counter';
29}
30
31document.querySelector('img').addEventListener('animationend', () => {
32    alert('animationend');
33});
34</script>
35</body>
36</html>