IT技術Labo - HouseTect

<input type="image">タグと<img>タグのどちらを採用するかは、
結果的にやりたいことに依存します。

・tabindex属性について
始めに言うと以下のHTMLは文法エラーになる。
IEとかでは怒られることはないが、誤動作する原因に繋がるので注意が必要である。

まず、<img>タグには「tabindex」属性が存在しない。
その代わり「<input type="image">」には「tabindex」属性が存在します。

ここら辺でも使い方が分かれますね。
たとえば、ImageButtonとして使いたい場合は、きっちり「tabindex」属性を指定するケースが多々あるとおもうので、
その場合は、「<input type="image">」を使いましょう。

・onclickイベントについて
<img>タグでonclickイベントを使う場合、Enterを押下又は、マウスでクリックの2つになります。
スペースの押下ではイベントが反応しません。

<input type="image">ではEnterでもスペースでもイベントが反応します。

---

<script>
　　function JS_Click(){
　　　　alert("クリック");
　　}
</script>

<img src="aaa.jpg" tabindex="1" onclick="JS_Click();">
<br>
<img src="aaa.jpg" tabindex="2" onclick="JS_Click();">
<br>
<input type="image" src="aaa.jpg" tabindex="3" onclick="JS_Click();">
<br>
<img src="aaa.jpg" tabindex="4" onclick="JS_Click();">

---