|
|
|
               |
Okay so you want to create more than one link on only one image, then you will need to create an image map. One problem with image maps is that people with text browser will not be able to see them and therefore all the links won't be found. But if the design of your layout requires one then just consider this and try to place an alternate way of navigating around your site like a footer or text links in your content.
You will want to use a program to help you create an image map, where you will just click and drag a shape on your image and the program will calculate the x-y position for you. Most HTML editors will have something to help you in creating your map.
Note: Image maps use a graphic system close to the caretesian in algebra. Where the "X" is the horizontal position, and "Y" is your vertical position. The coordinates will look like this: x,y. X=0 and Y=0 will always be the upper left corner.
I will discuss the client-side image map vs. server-side, mainly because it is simpler and more widely used.
Map
You will use the <MAP> </MAP> tag to place your image maps. Along with the MAP tag you will use the NAME attribute to place the name of your map (not your image files name).
<MAP NAME="map_name"> </MAP>
I like to place the map tag just before the closing </BODY> tag, but you can place it at the beginning, in the <HEAD> tag, almost anywhere.
Area
The <AREA> </AREA> tag is where you will describe the actually shape, linked document and anything else pertinent to that particular spot.
HREF
The HREF attribute works just like it does in the <A> tag. This is where you will place the URL of the document you want the user to go to once he/she clicks on this spot.
Shape
To create the shape of the spot use the SHAPE attribute, here are the shapes you can create:
To create a Rectangle use "rect", this is defined by the top-left corner and the bottom-right corner points.Coords
To create a Circle use "circle", this is defined by the center point and the radius for the circle.
To create a Polygon use "poly", this is defined by various points (x,y) in a clockwise rotation. Line segments connect the points.
This attribute is where you will place the (x,y) points and the radius (circle). Do not include "(" parenthesis symbols. They are separated by commas only.
<AREA COORDS="20,20,70,60">
Alt
This attribute works exactly the same as it does in the <IMG> tag.
NOHREF
This attribute is used when you don't want the user to go anywhere, but you would like some type of javascript function to do something in that particular area of the image.
USEMAP
This attribute gets placed inside of the <IMG> tag, this references the MAP tag in the same document. The name of the map is what you want to put inside this attribute, but include a "#" sign in front of the name, like so:
<IMG SRC="" USEMAP="#mapname">
© Copyright 2000-2002 by Pepmint.com. All Rights Reserved