Untitled Page

How to Make This Page

The boxes above are clear.gif pictures, with borders (in Object Properties).
DON'T use Shape objects to make the boxes - the ID won't work with those.

Each image (and box) needs an ID - typed into the Object HTML / Inside Tag.
This example page uses the following IDs:
       boxes    = beckham       ford       farrel     pitt
       pictures   = david     harrison    colin     brad

Make the pictures movable by typing the following HTML:
       onclick = "drag(this,100,100)"
The numbers 100,100 mean the pictures will snap into place by jumping to the nearest multiple of 100 -
e.g. 0 or 100 or 200 or 300, etc. Then the boxes need to be placed at exact multipiles of 100 -
check the x coordinate at the bottom of the screen.

To check whether a picture is positioned correctly when it is dropped, use this code:
      ondrop=
     "
       if ( near(brad,pitt) )
          alert('right')
     "
Blank spaces don't matte, but be careful with all the punctuation.

So the complete HTML entry for one of the pictures looks like this:

    id="brad"

    onclick="drag(this,100,100)"

    ondrop=
       "
         if ( near(brad,pitt) )
           alert('right')
       "

Assignment

Make a similar page with 3 pictures (or more) that need to be dragged to the correct position.
Remember to use a clear.gif image to mark target locations, and line up the target locations
at positions where the snap will work correctly. You will want to make all the pictures roughly
the same size, so all the boxes can be similar sizes.

Don't forget to copy the EzAction into a Script box in your page - this makes drag, drop, and near work.

(You don't need to make a [Cheat] button.)