ありきたりのボタンではなくオリジナルの画像を使ったボタンを作ってみたかったので、いろいろ調べました。特にスマホ（Iphone）で長押しでの画像の保存を回避することができたので備忘として記録しておきます。
解決に役立ったページ
以下のページを参考にさせていただきました。ありがとうございます。
スマホでの「:activeでの挙動」と「要素への『ontouchstart=””』の追加」
スマホでの「長押しでの画像保存を禁止」
では、「画像にJavascriptのonclickを足しただけ」「PCサイト向けにボタン押した挙動を追加」「スマホでの対応」と順に追って書いていきます。
画像にクリックしたときのfunctionをつけただけ
とりあえず、画像を置いて、それにクリック時にfunctionをつけただけです。
各コードの下に実際のボタンを配置しています。クリックして見てください。
<div class="waku">
<img src="https://egaoyo.com/uploads/test_botton.png" class="test_button" id="test_bottun1" onclick="button_click1()">
</div>
<span id="textaa"></span>
<script>
x=0
function button_click1(){
x=x+1
sentence1 =x +"回クリックされました。";
document.getElementById("textaa").innerHTML=sentence1 ;
}
</script>.waku{width:150px; height:75px ;}
.test_button{width 150px;}
画像があるだけなので、クリックしても押した感は全くありません。
パソコン用にクリック時の演出を追加
次に、擬似クラス(hoverやactive）のなかのactiveを使ってボタンがクリックされたときに、ボタンが少し縮んで押したことが分かるようにします。
CSSに、「.test_button2:active」の疑似クラスで画像が少し小さくなるようにしました。（5行目）
<div class="waku">
<img src="https://egaoyo.com/uploads/test_botton.png" class="test_button2" id="test_bottun2" onclick="button_click2()">
</div>
<span id="textbb"></span>
<script>
y=0
function button_click2(){
y=y+1
sentence2 = y +"回クリックされました。";
document.getElementById("textbb").innerHTML=sentence2 ;
}
</script>.waku{width:150px; height:75px ;}
.test_button{width 150px;}
.test_button2:active{width :144px ; margin-left:3px ; margin-top: 3px ;}
パソコンでは問題なく動作しますが、スマホでは押している時間が少し長いと画像が選択されて「コピー」や「写真に保存」の機能が動作してしまいます。
スマホ用の設定
htmlのほうでは、画像に「ontouchstart=””」を追加しスマホのボタンに触ることでactionが効くようにします。
また、「draggable=”false”」と追加して長押ししたときにドラッグにならないようにします。（2行目）
CSSのほうで、おまじないのように以下を追加します。(7行目から）
-webkit-touch-callout:none;
-webkit-user-select:none;
-moz-touch-callout:none;
-moz-user-select:none;
user-select:none;
これで長押ししたときに画像の保存などにならないようにします。
<div class="waku">
<img src="https://egaoyo.com/uploads/test_botton.png" class="test_button2" id="test_bottun3" ontouchstart="" draggable="false" onclick="button_click3()">
</div>
<span id="textcc"></span>
<script>
z=0
function button_click3(){
z=z+1
sentence3 =z +"回クリックされました。";
document.getElementById("textcc").innerHTML=sentence3 ;
}
</script>.waku{width:150px; height:75px ;}
.test_button{width 150px;}
.test_button2:active{width :144px ; margin-left:3px ; margin-top: 3px ;}
#test_bottun3{
-webkit-touch-callout:none;
-webkit-user-select:none;
-moz-touch-callout:none;
-moz-user-select:none;
user-select:none;
}
これで長押ししても画像の保存やドラッグになったりしなくなります。パソコンでもドラッグできなくなります。
まとめ
- CSSで疑似クラスのactiveを使ってクリック時の演出が可能。
- スマホ向けには、以下を設定する
- 要素に「ontouchstart=””」を設定してタップでactiveが反応するようにする。
- 要素に「draggable=”false”」を設定してドラッグできないようにする。
- CSSで「-webkit-touch-callout:none;-webkit-user-select:none;-moz-touch-callout:none;-moz-user-select:none;user-select:none;」を設定して長押しでの画像保存などを回避する。
コメント