Using DHTML for a Simple Webbased Image Analysis Application

1
Scripting Techniques
Using DHTML for a Simple Web-based Image Analysis
Application

• To obtain mouse position data from an image you
  must associate an onClick event handler with the
  image. This can be done by turning the image
  into an anchor
• ltSPAN ID "PicPos"gt
• ltA HREF"" ONCLICK"locate(event)return false"
  ONMOUSEOVER"window.status'If you need help
  getting started, please click the help
  button.'return true"gt
• ltIMG SRC"images/1/ballDrop.gif" BORDER0
  ALIGNbottom name"picture"gt
• lt/Agtlt/SPANgt
• Mouse coordinates are obtained as properties of
  the mouse click event in the programmer defined
  function locate(event). The method differs
  between browsers
• Netscape
• pixelCoordinateFromTop eval(event.pageY)
• pixelCoordinateFromLeft eval(event.pageX)
• Internet Explorer
• pixelCoordinateFromTop eval(event.y)
• pixelCoordinateFromLeft eval(event.x)
• Note that Internet Explorer does not actually
  pass event objects through the parameter list.
  You must access properties of the event using the
  object name event. Netscape does pass event
  object names.
• Scaled data can be placed by the script in a
  lttextareagt form element.

James Hays and Christopher D. Wentworth Department
of Physics Doane College Crete, Nebraska
68333 jhays_at_doane.edu or cwentworth_at_doane.edu
Need For A Simple Image Analysis Tool

• We use a web-based homework assignment system.
• Allows implementing a Just-In-Time teaching
  environment.
• Can give students immediate feedback on practice
  assignments
• Homework questions can use multimedia resources.
  Research suggests that the greater the
  integration of video analysis into a curriculum,
  the greater the educational impact (Beichner,
  R.J., Am J Phys 64 (10), 1272 (1996)). Some of
  these questions require students to obtain
  position and time data from images. A simple
  image analysis tool can be used with these
  questions.

Benefits of DHTML Techniques
A Java port of NIH Image is available and can be
run as an applet (go to http//rsb.info.nih.gov/ij
/), however, the functionality and complexity of
NIH Image may be greater than is desirable for
use in an introductory physics course. Using
DHTML scripting techniques allows the instructor
to offer the student a small set of easy to use
tools. Adapting the DHTML scripts is easier than
adapting Java programs, at least for
non-professional programmers. HTML files download
faster than the Java applet files.
Using The Image Tool Web Page
A link to the image analysis tool page is
provided in the homework question. Screen shots
to the right show how a scale is set and
position-time data for an object is taken.
Problems With DHTML Techniques
There are still differences in the document
object model used by Netscape and Internet
Explorer. This increases the complexity of
script programming. The scripts developed in
this project require all frames in a video clip
to be split into separate image files with
sequential filenames.
Additional Information
Go to http//www.doane.edu/nova Select Teacher
Resources