Imagemaps: Deriving Coordinates Manually

Deriving x,y coordinates for clickable shapes in an image is not difficult; even deriving x,y coordinates to define complex polygons is not difficult, just time consuming.

All that you need for deriving x,y coordinates is image editing software, such as Adobe Photoshop, Equilibrium Debabelizer, or even the freeware Paint program which comes with the Windows OS. Once you have opened your image in one of these programs, you will need to perform the following steps:

  1. Make certain that your cursor is shaped like a crosshair; this will allow you to position your cursor precisely over the image. In Debabelizer, the crosshair cursor is the automatic choice; in Adobe Photoshop and Paint, the crosshair cursor is active when you have chosen the marquee tool from the Tool palette (the marquee tool allows you to click-and-drag to select a rectangular area of the image for editing, and is the first tool at the upper-left-hand corner of the Tool palette in both Photoshop and Paint).
  2. Locate the mouse position x,y coordinate readout for the program. In Debabelizer, this readout is part of the main toolset at the top of the screen, and is clearly marked and visible at all times. In Paint, this readout is located at the lower-right-hand corner of the image. In Photoshop, this readout is located in the Info palette, and requires special handling (I'll talk about this at greater length shortly).
  3. As you roll your mouse cursor around the screen (WITHOUT clicking or click-and-dragging), you will see the x,y coordinate for your cursor in the mouse position readout mentioned in step 2. You will need to align your cursor over the appropriate point of your chosen shape, and write down the x,y coordinate given in the readout. That's it!

Because Adobe Photoshop requires specialized knowledge to perform the above steps, and because Photoshop is the single most essential image editing program in every web programmer and designer's arsenal of software, I have snapped some screenshots from Adobe Photoshop 5.5 to illustrate the steps for deriving these mouse cursor coordinates for use in an imagemap.

Step 1: Using the "demoMap.gif" graphic from a previous example in this module, I have selected the marquee tool on the tool palette; you can see how the cursor (on Square 1) has become a crosshair:

Step 1

Step 2: Next, I need the Info palette. If it's not visible, I need to choose the "Show Info" option from the Window menu:

Step 2

Step 3: In the Info Palette, I can see the mouse position readout in the lower-left-hand corner of the palette. The readout is NOT in integers, however, which must mean that we're not looking at PIXEL values, but rather something else, probably inches:

Step 3

Step 4: To change the mouse position readout, I need to access the "Palette Options" pulldown menu:

Step 4

Step 5: Once in the "Info Options" dialog box, choose the "Mouse Coordinates: Ruler Units" pulldown menu and reset it to "Pixels"; click OK:

Step 5

Step 6: Now, the mouse position readout will operate correctly. Position your cursor over the upper-left-hand corner of the square; the mouse position readout says that its x,y coordinate is "7,7". Write that down on a piece of paper. Remember: you don't need to click or drag the mouse; just positioning the mouse over the desired spot is sufficient:

Step 6

Step 7: Now, position your cursor over the lower-right-hand corner of the square; the mouse position readout says that its x,y coordinate is "71,71". Write that down, too:

Step 7

Step 8: Combine the first and second x,y coordinates together: "7,7,71,71". That's it! We've derived the position of the first RECT on the image! Now, you would need to derive the position of the second RECT on the image (Square 2). Once you have derived the positions of all the RECTs you want, you could use that information to program the client-side imagemap in HTML (which I'll talk about shortly).

Main Menu

Copyright © 2001 Michael Masumoto. All Rights Reserved.