|
How to Build Image Maps without an Image Map Editor
Image Maps Aren't Hard to Build by Hand
Boosting your website can be done using image maps, which can be a thrilling and innovative thing to do. You’d be surprise to learn just how easy making an image map can be, given the availability of large amounts of image map editors in Ottawa .
What you need:
• an image
• an image editor
• an HTML editor or text editor
Not much is really required in order to get started with image maps. When you point on an image, the majority of image editors will actually show you the coordinates of your mouse.
First you create the map on your Web page; all it needs is a name.
<map name="name">
You’re making an area that is clickable on an image when you make an image map. There are three shapes you can create:
• rect - a rectangle or four sided figure
• poly - a polygon or multisided figure
• circle - a circle
You will need to know the coordinates you would like to map to make these areas.
X,Y (over,up) is the listing for all coordinates. You would have to map the top left and bottom right corners for rectangles. You would type: 0,0,10,15 for upper left corner 0,0 and lower right corner 10,15 and then include it in the map:
<map name="name">
<area shape="rect" coords="0,0,10,15" href="http://webdesign.about.com/">
Each coordinate is mapped separately for a polygon. The first and last set of coordinates are automatically connected by the web browser.
<map name="name">
<area shape="rect" coords="0,0,10,15" href="http://webdesign.about.com/">
<area shape="poly" coords="10,0,14,3,7,10" href="http://webdesign.about.com/">
Like the rectangle, circle shapes also require two coordinates, but the radius or the distance from the center of the circle has to be specified for the second coordinate. Therefore, you would write 20,10,5 for a circle with the center 20,10 and radius 5:
<map name="name">
<area shape="rect" coords="0,0,10,15" href="http://webdesign.about.com/">
<area shape="poly" coords="10,0,14,3,7,10" href="http://webdesign.about.com/">
<area shape="circle" coords="20,10,5" href="http://webdesign.about.com/">
Closing the map and linking it to the image is the only thing then left to do.
<map name="name">
<area shape="rect" coords="0,0,10,15" href="http://webdesign.about.com/">
<area shape="poly" coords="10,0,14,3,7,10" href="http://webdesign.about.com/">
<area shape="circle" coords="20,10,5" href="http://webdesign.about.com/">
</map>
<img src="image" usemap="#name">
|
