IT技術Labo - HouseTect

Javaフリーエンジニアとしての苦悩や、アーキテクトになるための努力の軌跡を掲載しています。.NETとJavaに力を入れた技術情報発信ブログです。

スポンサーサイト


上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

<input type="image">タグと<img>タグの違い


<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();">


スポンサーサイト

COMMENT

Name
E-mail
URL
Comment
Pass  *
Secret? (管理者にだけ表示)

Pickup Link!

COUNTER



RSSの登録はこちらからどうぞ。
RSS

ブログ内の検索

Google

プロフィール

Hisasann

Author:Hisasann
かなり走り書きなブログで申し訳ないです。個人のメモ程度に使っていますが、よかったら参考にしてくださいね。メールまってま~す。

相互リンク募集しています。 下記メアドまでメールください。
Rastaman@Mixi
Rastaman@コトノハ
Rastaman@テクノラティ

アクセスランキング

ブログパーツ

ブログランキング



ブロとも申請フォーム


上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。