GeezerVison

The World Wide Web, restored to 800 pixels of glory.

GeezerVison is showing javascript.info — Keyboard-driven mouse

back to the lesson

Keyboard-driven mouse

importance: 4

Focus on the mouse. Then use arrow keys to move it:

Demo in new window

P.S. Don’t put event handlers anywhere except the #mouse element.

P.P.S. Don’t modify HTML/CSS, the approach should be generic and work with any element.

Open a sandbox for the task.

We can use mouse.onclick to handle the click and make the mouse “moveable” with position:fixed, then mouse.onkeydown to handle arrow keys.

The only pitfall is that keydown only triggers on elements with focus. So we need to add tabindex to the element. As we’re forbidden to change HTML, we can use mouse.tabIndex property for that.

P.S. We also can replace mouse.onclick with mouse.onfocus.

Open the solution in a sandbox.

You are visitor 01402503 — GeezerVison does not store the pages you look up.
Best viewed with Netscape Navigator 4.7 or Internet Explorer 6 at 800×600. No cookies required.