2011-08-17 13 views
1

基本的なHTMLページ内でクリック可能なアイテムをハイライトする方法があるかどうかを質問したかったのは、理想的にはキーボードのキーを押すことでした。 機能プロトタイプを構築するときに、時間を節約するために、機能の一部のみが実際にフローを表示するように開発されています。私はどういうわけかどのアイテムがクリック可能であるかを示したいので、ユーザーはクリックすることができるものを見つけるために1つのアイテムごとにマウスを移動する必要はありません。jQueryのハイライトクリック可能な領域

理想的には、ユーザーが定義済みのキーを押したとき、ボックスがすべてのリンク(テキストまたはイメージ、またはマップ座標)の上に表示され、スクリプトを使用して自動的に達成され、私が作ったプロトタイプごとに手動でセットアップする必要があります。

これは可能ですか?事前にお寄せいただきありがとうございます!

答えて

2

あなたはこのようにそれを行うだろう:

はすべてクリック可能な要素にCSSクラス(すなわちhighlight_class)を割り当てます。このように、一致するすべての要素を、キーイベントを処理し、hightlightするjqueryのを使用します。

$(document).keypress(function(event) { 
    if(event.which == 32){ //Space key 
     event.preventDefault(); 
     $('.highlight_class').effect("highlight", {}, 3000); 
    }   
}); 

this jsfiddle

+0

を見てください提案をいただき、ありがとうございます。プレーンテキストリンクではうまくいきますが、画像や地図領域をリンクしたい場合は、ハイライトは表示されません。たぶん、さまざまな種類のハイライトを試してみる必要がありますか?また、トリガーが異なる方法で動作するように、キーが押されている間にハイライトが表示されるように、タイムアウトで表示/非表示を行う方法はありますか?そうすることで、キーを5秒間押し続けると、クリック可能なすべての領域を表示する時間があります。 – ale

+0

私はイメージのためにあなた自身のハイライト機能を作成しなければならないと思います。 (すなわち、画像の不透明度を変更する)。キーが押されている間ハイライトを表示したい場合は、 'keydown()'イベントを使用してハイライトを有効にし、 'keyup()'イベントを使用してそれを無効にすることができます。 –

+0

yeh多分、私はどういうわけか、関数が領域の上に新しいdivを作成し、それにハイライトとして見えるように色を割り当てる必要があります。実際にはクリック可能な大きな画像のほんの一部である可能性があるため、必ずしも画像全体ではありません。 – ale

0

あなたが例えば

jQueryのkeypress()を使用して機能を起動するキーをバインドすることができ、あなたのマークアップとするときにキー表示がトグルされていることをユーザープレスを隠しdivを追加作成することができます。

キーコードを使用して達成することもできます。たとえば、

var code = (e.keyCode ? e.keyCode : e.which); 
if(code == 9) { //keycode for the tab key 
    $(".hidden-elements").toggle(); 
} 

このヘルプが必要です。

0

)(jQueryの.keypressを見てみましょう

http://api.jquery.com/keypress/

アイデアは、あなたのクリック可能なアイテムにCSSクラスを追加することができます。アイテムを知っていて、その位置を決定できるので、そのクラスの要素をループして、いくつかのツールチップをポップアップさせることができます。

ただし、クリック可能な行を明るい色で強調表示する方が良いでしょうか?または、小さなアイコンを追加して、ユーザーに一目惚れすることを知らせることができますか?

関連する問題