画像をボタンのようにフォーカス対象にする。

Question

現在、画像にonclick，onmouseover，onmouseoutイベントを設け、
ボタンとして機能を持たせて、html画面を作成しております。

htmlソース
<IMG id="logout_btn" onmouseover="Onmouseoverlogout();" 
　onmouseout="Onmouseoutlogout();"
　onclick="clicklogout();"
　img src="images/logout.gif"
　width="100" height="27" border="0" name="logout_btn">

これを、キーボード操作だけでも押せるようにしたいのです。
この目的を果たす為には、
１．Tabキーが押された時に移り変わるフォーカス対象の中に加える
（画面の中には他に幾つかのテキストボックスやコンボボックスがあります）
２．Enterキーが押された時のイベントを設定する。

この２項目を実現する為にはどうすればよいのでしょう？

特に２は、Enterキーを押した時にフォーカス状態にある対象を判別する
⇒それによって実行する関数を選ぶif分岐を作る、といった手順が必要かなと想像しています。
（フォーカスされている画像が、「ログイン」ボタンだったらSubmit関数を呼び、
　「リセット」ボタンだったら全項目をブランクにするコードを走らせる、等…）

フォーカス対象、などのキーワードで検索しても別の事例が検索できてしまい
なかなか解決できません。
Web製作１ヶ月の初心者で、基本的な事を聞いてしまっているかもしれませんが
ご助力いただけましたら幸いです。

fujillin · Accepted Answer

なんか、もっと素直な作り方があると思いますけれど…

（HTMLで用意されているものを、そのまま利用したほうが良いと思う）

＞１．Tabキーが押された時に移り変わるフォーカス対象の中に加える
スクリプトで特殊制御するよりも、form部品を利用するほうが賢いと思われます。
（そうでないと、formの制御全体を作成することになりかねない）

＞２．Enterキーが押された時のイベントを設定する。
<input type=image>を利用してあげれば、Enterとclickが同じイベントで取得できるけれど、他のテキスト入力欄でEnterキーを押したときにsubmitの代表としてこの要素でイベントが発生したことになってしまうみたい。
これを区別するためにダミーでサブミットボタンを作ってみたところ、区別は可能になったが、非表示にしたとたんIEはそのボタンを無視してくれる。

しかたが無いので、keyイベントで識別。
これだとclickについてはまた別に制御する必要がある。（省略）
（Enterキーでsubmitが発生するので、適当に制御する必要あり）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head><title>test</title>
<script type="text/javascript">

</script>
</head>
<body>
<form action="" method="" onkeydown="test(event)">
<input type="text" name="i1" value="">
<p>LogIn: <input type="image" name="log_in" src="btn1.gif">
<p><input type="text" name="i2" value="">
<p>LogOut:<input type="image" name="log_out" src="btn2.gif">
</form>
</body>
</html>

画像をボタンのようにフォーカス対象にする。

なんか、もっと素直な作り方があると思いますけれど…

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング