subsection contents

Selection Frame Demo (older version)

Mouse Co-ords:
Grabber Size:

This little JavaScript application demonstrates how to use layers to simulate a resizable selection frame or grabber.

When the mouse pointer is over the image, a blue selection frame is displayed. The size of the frame is determined by the "grabber size" option in the form.

The position of the mouse pointer relative to the top left of the page is displayed. On Netscape, the pointer position is relative to the top left of the image itself. When you click on the within the confines of the image, an alert reports the mouse co-ordinates and the current grabber size.

This application should work in Netscape 4 (and later), Internet Explorer 4 (an later), Opera 6 (and later), Mozilla/Chimera, Konqueror 2.2.1 (and later). Extra work was necessary to make it work with Netscape 4.

Some known issues:

  • Opera 5 (all platforms?) - frame lines only drawn as points
  • IE 5 (MacOS 9) - superfluous space at top of page
  • IE 5.5 (WinNT4) - selector frame lines incorrectly drawn
  • non-Netscape - top-left co-ords of the image are not able to be determined; try a newer version instead

Last updated: May 19, 2003