画像をボタンのようにフォーカス対象にする
- 画像をボタンのようにフォーカス対象にする方法についての質問です。
- 現在、画像にonclick，onmouseover，onmouseoutイベントを設け、ボタンとして機能を持たせていますが、キーボード操作だけでも押せるようにしたいです。
- 具体的には、Tabキーが押された時に移り変わるフォーカス対象の中に加え、Enterキーが押された時のイベントを設定したいです。どのようにすればよいでしょうか？
- ベストアンサー
画像をボタンのようにフォーカス対象にする。
画像をボタンのようにフォーカス対象にする。 現在、画像に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製作１ヶ月の初心者で、基本的な事を聞いてしまっているかもしれませんが ご助力いただけましたら幸いです。
- wendy0303
- お礼率89% (81/91)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
なんか、もっと素直な作り方があると思いますけれど… （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"> <!-- function test(evt) { if (evt.keyCode != 13) return; var t = evt.target || evt.srcElement; if (t.nodeName == 'INPUT' && t.type == 'image') alert(t.name); return; } --> </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
- タブ切替ボタンからのフォーカス移動について
いつもお世話になっています。 VisualStudio2005,Vistaで開発しています。 タブコントロールのタブ切替ボタンにフォーカスが当たっている状態で左右キーを押すと、 隣のボタンにフォーカスが移ると共にアクティブなタブが変更されます。 その状態でTabキーを押すと、該当タブページの先頭オーダーを持つコントロールにフォーカスが移りますが、 これと同じ動作を下キー、Enterキーで実現したいと考えています。 テキストボックス等ではkeypressイベント、keydownイベントでフォーカス制御ができましたが、 どうもうまくいきません。 個々のタブページでは両イベントが発生せず、タブコントロール本体ではイベント自体は起きるものの、 コンボボックスの内容を変更するために押した下キーにすら反応してしまいます。 何か良い解決方法はありませんでしょうか。 皆様のお知恵をお貸しいただけましたら幸いです。
- ベストアンサー
- Visual Basic
- imgボタンにfocusの当て方
<a href="#" onclick="javascript:on_pwche();"><img src="./img/ok.png" alt="OK"></a> 上記のボタンにフォーカスを当てたいのですが、 どうしたら良いのでしょうか？ 宜しくお願いします。 －－－以 上－－－
- ベストアンサー
- JavaScript
- ボタンに画像を使えません
お世話になります。 セレクトボックスでリンクする（ボタン付き） http://www.tagindex.com/javascript/link/select2.html 上記のサイトの「input type="button"」のボタンでリンクすることはできたのですが、 <input type="image" onClick="jump()" src="画像.gif" alt="" width="201" height="46" border="0" onmouseover="this.src='画像_on.gif'" onmouseout="this.src='画像.gif'"> ↑のようにtypeをimageにして画像をボタンに使おうとしますと、 「?select=&x=92&y=33」とURLの末尾に追加されるだけでリンクができません。 上記サイトのjavascriptを「input type="image"」のボタンで使用するには どのようにすればよろしいでしょうか。 よろしくお願いいたします。
- ベストアンサー
- JavaScript
- フォーカスについて
エンターを押すと、特定のコマンドボタンが押ささるプログラムを作っているのですが、エンターを押すとフォーカスがセットされているコマンドボタンが押ささってしまいます。 特定のコマンドボタンって言っても、１個のコマンドボタンなんですがなんかいい方法ありますか? それから、キーボードの矢印キーで、並んであるコマンドボタンにフォーカスを移動させたいのですがいい方法ありますか? TabIndexの関係だと思うのですが、上キーを押すと、すぐ上のボタンではなく右にいったり左にいったり・・・ どうか教えてください。 お願いします
- ベストアンサー
- Visual Basic
- エンターキーで画像にフォーカス
エンターキーを押すと画像にフォーカスが移るようにしたいのですが、 下記のスクリプトをスマホで実行するとiphoneっで文字入力ができなくなります。(chrome) アンドロイドとIphoneで実行ボタンで画像にフォーカスを移すにはどうすれば良いでしょうか --HTML-- <img id="pic" src="img/img.png"/> <input id="comment" type="text" name="comment" runat="server" onkeypress="return submitStop(event);"/> ---JS--- function submitStop(e) { if (!e) var e = window.event; if (e.keyCode == 13) pic.focus; return false; }
- ベストアンサー
- JavaScript
- マウスオーバー、アウト時の背景画像の変更
こんにちは。 どうしても上手く行かないので教えてください。 マウスオーバー時とクリック時に背景画像を変更したいので、下記のように書いてみました。 初め、８つあるメニューのどこかが必ず、他のメニューとは違う背景画像になっていて（クリックしたときと同じ背景画像）、それはランダムで決まっていません。 たとえばデフォルトの画像がimg1.gif、変更画像がimg2.gifだとして、メニュー1の画像がimg2.gif、その他メニューはimg1.gifで、メニュー2をマウスオーバー（img2.gifに変更）、アウトしても、メニュー1の画像はimg2.gifのままで、メニュー2をクリックして初めて、メニュー1をimg1.gifに変更したいのです。 説明が下手で申し訳ありませんが、どなたかお知恵をお貸しいただけないでしょうか。わかりづらい点ありましたら補足いたします。 よろしくお願いいたします。 ■JavaScript var imgno = 8 var imgflag = new Array() for(var i = 0 ; i < imgno ; i ++){ imgflag[i] = 0 } function ResetIMG(m_flag,num){ if(m_flag == 'cl'){ for(var i = 0 ; i < imgno ; i ++){ if(i == num){ imgflag[num] = 1 }else{ imgflag[i] = 0 } } } for(var i = 0 ; i < imgno ; i++){ if(imgflag[i] == 1){ document.getElementById("menu" + (i+1)).style.backgroundImage = "url(img1.gif)" }else if(imgflag[i] == 0){ document.getElementById("menu" + (i+1)).style.backgroundImage = "url(img2.gif)" } } if(m_flag == 'ov'){ document.getElementById("menu" + (num + 1)).style.backgroundImage = "url(img1.gif)" } } ■HTML <A onclick="ResetIMG('cl',0)" onmouseover="ResetIMG('ov',0)" onmouseout="ResetIMG()" id="menu1">メニュー１</A> <A onclick="ResetIMG('cl',1)" onmouseover="ResetIMG('ov',1)" onmouseout="ResetIMG()" id="menu2">メニュー２</A> <A onclick="ResetIMG('cl',2)" onmouseover="ResetIMG('ov',2)" onmouseout="ResetIMG()" id="menu3">メニュー３</A> <A onclick="ResetIMG('cl',3)" onmouseover="ResetIMG('ov',3)" onmouseout="ResetIMG()" id="menu4">メニュー４</A> <A onclick="ResetIMG('cl',4)" onmouseover="ResetIMG('ov',4)" onmouseout="ResetIMG()" id="menu5">メニュー５</A> <A onclick="ResetIMG('cl',5)" onmouseover="ResetIMG('ov',5)" onmouseout="ResetIMG()" id="menu6">メニュー６</A> <A onclick="ResetIMG('cl',6)" onmouseover="ResetIMG('ov',6)" onmouseout="ResetIMG()" id="menu7">メニュー７</A> <A onclick="ResetIMG('cl',7)" onmouseover="ResetIMG('ov',7)" onmouseout="ResetIMG()" id="menu8">メニュー８</A>
- 締切済み
- JavaScript
- コマンドボタンのEnterイベント後に、フォーカスを移動したい。
コマンドボタンのEnterイベント後に、フォーカスを移動したい。 フォームに「TextBox1」(TabIndex=0)「TextBox2」(TabIndex=1)「CommandButton1」(TabIndex=2)の３つのコントロールがある場合。 CommandButton1がクリックされた場合も、TextBox2からCommandButton1に、タブキーまたはエンターキーで、フォーカスが移った場合にも、同じ処理を行い、処理結果によってTextBox1やTextBox2にフォーカスを移したいと考えています。 以下のようなサンプルを作成しました。 Private Sub CommandButton1_Enter() CommandButton1_Click End Sub Private Sub CommandButton1_Click() MsgBox ("OK") TextBox2.SetFocus End Sub この場合、CommandButton1_Enterのイベントが起こった場合、CommandButton1_Click()のTextBox2.SetFocusは効きません。 （正確には、CommandButton1_Enterイベントが終わった時点で無効でしょうか。） Enterイベントは、フォーカスが移動する前に発生するため、このイベントが終わった後に、そもそもの動作に戻り、フォーカス移動が発生してしまうからなのだと思っております。 要は、コマンドボタンにタブキーやエンターキーでフォーカスしても、コマンドボタンをクリックしたのと同じ処理を行い、所定の位置にフォーカスを持っていきたいのですが、どのように行えば良いか、わからない状況です。 よろしくお願いいたします。
- ベストアンサー
- その他MS Office製品
- javascriptを使って画像のランダム表示とロールオーバーをセット
javascriptを使って画像のランダム表示とロールオーバーをセットで行いたいのですが上手くいきません… javascript超初心者です…。画像をランダムに表示し、さらにそのランダムに表示された画像をそれぞれ違った画像にロールオーバーさせたいのですが上手くいきません。 一応以下のように書いて試しているのですが、ランダム表示はするのですが、ロールオーバーはエラーがでてしまい画像が切り替わりません。どのようにすれば上手く出来るか、知恵を貸してください。宜しくお願いします。 <html> <body> <SCRIPT language="JavaScript"> <!-- // ランダムに画像を表示する img = new Array(); onMouseover = new Array(); onMouseout = new Array(); // 画像のアドレス(数字はジャンプ先のアドレスと対応) img[0] = "top1.gif"; img[1] = "top2.gif"; img[2] = "top3.gif"; img[3] = "top4.gif"; img[4] = "top6.gif"; // マウスオーバー onMouseover[0] = "top1roll.gif"; onMouseover[1] = "top2roll.gif"; onMouseover[2] = "top3roll.gif"; onMouseover[3] = "top4roll.gif"; onMouseover[4] = "top6roll.gif"; // マウスアウト onMouseout[0] = "top1.gif"; onMouseout[1] = "top2.gif"; onMouseout[2] = "top3.gif"; onMouseout[3] = "top4.gif"; onMouseout[4] = "top6.gif"; n = Math.floor(Math.random()*5); document.write("<img src='"+img[n]+"' border='0' onMouseover='"+onMouseover[n]+"' onMouseout='"+onMouseout[n]+"'>"); //--> </SCRIPT> </body> </html> 補足 ●ランダム用の画像が1～5まで、ロールオーバー用の画像がa～eまであるとして、ランダム表示によって1が表示されたらロールオーバーで表示される画像はaのみ、マウスアウトしたら１に戻る、というようにしたいです。同じように2-b,3-c…というように対応させたいです。 ●ページ読み込み時のみランダム用画像をランダム表示させ、後は上記のような流れにしたいです。 長くなりましたが、どなたか回答お願いいたします。
- 締切済み
- JavaScript
- ダイアログのデフォルトフォーカス
XPの時はボタンなどにフォーカスが当たっていてENTERキーを押していました win7になってから、ボタンにフォーカスがあたってなく、どうしてもマウスでクリックしなければならず、スピード感が鈍ります。 XPの時代のようなフォーカスの当たり方ができるようにする方法がわかれば教えてください
- 締切済み
- Windows 7
- onmouseover、onmouseoutの仲間でonmouseclickみたいな
GIFボタン三枚をあらかじめ用意し、 (1) 通常の状態から(btn0.gif)、 (2) マウスが乗るとボタンがテカり(btn1.gif)、 (3) クリックするとボタンがヘコむ(btn2.gif)、 (4) マウスが離れると通常の状態に戻る(btn0.gif)、 のような効果をつけたいと思うのですが (2) ができません。どう書いたらよいでしょうか。 <img src="./btn0.gif" onmouseover="this.src='btn1.gif'" onmouseout="this.src='btn.gif'"> CSSではhoverに相当するものだと思いますが、 思いつきでonmouseclickというのは違うようで。 よろしくお願い致します。
- ベストアンサー
- JavaScript
お礼
fujillinさん、ありがとうございます。 >スクリプトで特殊制御するよりも、form部品を利用するほうが賢いと思われます。 ですよね。。（汗 ここは素直にボタンを <input type="button" onclick="..."> 等で書き直すようにします。 （何で前の人はボタンを全部画像にしたんだろう。。） >Enterキー押下時イベント サンプルつきの回答、ありがとうございます。 区別の部分は少々難しそうですが、 それだけにこの回答は理解の助けとなりそうです。 ありがとうございます。 解決後、再度返信します。