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:
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 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 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 4: To change the mouse position readout, I need to access the "Palette Options" pulldown menu:
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 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 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 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).
Copyright © 2001 Michael Masumoto. All Rights Reserved.