- Coordinates are measured in pixels, relative to the upper
left corner of the image (0,0).
- The COORDS attribute in the AREA tag
- Example:
<MAP NAME="buttonmap">
<AREA SHAPE="rect" COORDS="0,0,75,75" HREF="home.html">
<AREA SHAPE="rect" COORDS="75,0,150,75" HREF="top.html">
<AREA SHAPE="rect" COORDS="150,0,225,75" HREF="srch.html">
<AREA SHAPE="rect" COORDS="225,0,300,75" HREF="comm.html">
</MAP> - Shapes:
Shape Coordinates RECT x1, y1, x2, y2 upper left and lower right corners CIRCLE x1, y1, x2, y2 x1,y1 is the center; x2,y2 is an edge POLYGON x1, y1, x2, y2 ... xn, yn - Some web authoring tools (Cosmo, FrontPage, others) do the whole job:
- They find the coordinates and generate the MAP and AREA tags.
- You just outline the linked area with your mouse.
- But if you're writing HTML by hand,
you need to find the coordinates of the areas in your image:
- Use an image-processing program such as Photoshop, Paintshop Pro, or Image Composer.
- For example, in Photoshop:
- Open the image file
- Window (menu), Show Info
- Edit (menu), Preferences, Units and Rulers..., set Units = Pixels
- Place the mouse in the image where you need the coordinates and read them from the X: and Y: fields
Course Contents
http://www.keller.com/html2/7/coords.html
Updated Wednesday, 31-Oct-2001 14:18:52 CST
Copyright © 2001
|