jQuery highlight clickable areas

I wanted to ask you if there is a way of highlighting clickable items within a basic HTML page, ideally by pressing a keyboard key. When I build functional prototypes, to save time only some of the functionality is actually developed to show the flow. I want to somehow show which items are clickable, so users don't need to hover every single item to find out what can b开发者_如何学Goe clicked.

Ideally what I want to achieve is when a user presses a predefined key, a box appears on top of every link (text or image or map coordinates), and this should be achieved automatically via a script, so that I don't have to set it up manually for every prototype I build.

Is that possible to achieve? Thank you in advance for your suggestions!

You would do it like this:

Assign a CSS class (i.e. highlight_class) to all clickable elements. Use jquery to handle the key event and hightlight all matching element like this:

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

Have a look at this jsfiddle

You can bind the key you want to trigger a function using jQuery keypress()

For example, you can create add hidden divs to your markup and when the user press that key the display is toggled.

You can also achieve it using keycode. For example

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

Hope this help.

Take a look at jQuery's .keypress()

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

An idea can be to add a css class to your clickable items. You can then loop through the elements with that class, and pop up some tooltip, since you know your item and can determine its position.

However, wouldn't it be better to highlight with some light colour your clickable rows? Or perhaps adding a small icon, to let the user know at first glance what can he do?