|
IMAGE MAPSCoordinates are always calculated starting in the upper left corner of the image (0,0), and positive y is down. The coordinates are entered as x,y values cooresponding to the pixels of the images. The 3 shapes may be combined in a single Image Map. An Image tag and map name must be designated for each different Image Map using the format: <IMG SRC="imagename.gif" usemap="#mapname"> where imagename designates the name of the Image to be used, and mapname designates the name of the Map information to be used. Each different Image Map on a page must have a unique name. A single Image Map may be reused on a page as often as desired. In that instance, the Map information need only be entered once. Even though you may wish to use Image Maps on your pages, it is advisable to use Text links as well. This is because older browsers are unable to process Client Side Image Maps. Also, people using certain Internet Service Providers are unable to use Image Maps (according to some literature on Image Maps, A.O.L. users are unable to use them). Therefore, providing Text links on your page will ensure that all users will be able to access your links.
The Rectangle ShapeThis Image Map displays the use of Rectangle Shapes in an Image Map. To define the coordinates for any Rectangle region, determine the upper-left and lower-right coordinates of the desired region. Use the format x,y, x,y. Note that there is a space between each set of coordiantes. It is important to note that coordinates of adjacent regions must not overlap.
In this example, two regions are defined by colored rectangles within the image while other regions are indicated by text. A set of coordinates defining a rectangular region around the text creates the desired image map region. Clicking anywhere within each defined region will send you to the corresponding link. The link may be defined as per any other link following the structure set for links.
The definition of the coordinates for this image are as follows:
<IMG SRC="rectangle.gif" align=left usemap="#rectangle"> 
The Polygon ShapeThis Image Map displays Polygon Shapes in the form of 4 books. The coordinates for each book are included in the definition of the Image Map. In this case there are 6 sets of coordinates for each book; one for each corner. Use the format x,y, x,y, x,y. Note that there is a space between each set of coordiantes. It is important to note that coordinates of adjacent regions must not overlap.
In this example, clicking anywhere within the top and spine of each book will send you to the corresponding link. The link may be defined as per any other link following the structure set for links.
The definition of the coordinates for this image are as follows:
<IMG SRC="books.gif" align=left usemap="#books">
The Circle ShapeThis Image Map displays Circle Shapes. The coordinates for each colored circle are included in the definition of the Image Map. For Circle Regions, determine the coordinates of the center point and the radius, in pixels and enter them as x,y, r. Note that there is a space between the center point coordinates and the radius value. It is important to note that coordinates of adjacent regions must not overlap.
In this example, clicking anywhere within the defined radius of each circle will send you to the corresponding link. The link may be defined as per any other link following the structure set for links.
The definition of the coordinates for this image are as follows:
<IMG SRC="circle.gif" align=left usemap="#circle">
|
