|
|
This command tells the computer to use the image, imagemap2.gif for the map named face (on the same page). If you read the tutorial on page jumps, you probablly already know what the number sign means. If you haven't, please click here to read it. It's only two paragraphs long and it'll help you understand this tutorial better. When the # sign is used with ismap usemap, it works the same as page jumps with one exception, it calls a map name on the page instead of an a name. The border = 0 tells the computer to subtract the border from the map picture.
<map name="face">This command tells the computer to start the map data and name the map, face. The map is called from the above command.
<area href = "imagemap.html#left_eyeball" shape = "circle" coords = "47,26,6">The area href = "imagemap.html#left_eyeball" tells the computer that the proceeding shape with the coordinates listed will link to the left_eyeball section of imagemap.html. The shape = "circle" part tells the computer that the following coordinates are going to be for a circle. A circle's coordinates are defined as x - coordinate, y - coordinate, radius of the circle. To find the radius of the circle, take the edge's y coordinate and subtract it from the center's y coordinate. Coords = "47,26,6" tells the computer that the coordinates of the shape are 47,26,6.
<area href = "imagemap.html#left_eye" shape = "circle" coords = "46,27,19">Ditto above with different coordinates and a different link. The only problem you may or may not have observed here is the fact that these coordinates overlap the link before. When this occurs, the computer gives the first area href priority over the ones after so the left eye isn't really a circle, it's more like a doughnut.
<area href = "imagemap.html#right_eyeball" shape = "circle" coords = "172,21,5">Ditto the first area href paragraph with different coordinates and a different link.
<area href = "imagemap.html#right_eye" shape = "poly" coords = "154,14,189,8,176,39">Poly stands for polygon. A polygon's coordinates are defined as x,y,x,y,x,y,... where x and y are equal to the coordinates of the polygon's edges. The first x,y would be the x and y coordinates of the first corner, the second x,y would be the x and y coordinates of the second corner, etc. The rest (again), is a basic ditto of the second area href paragraph with different coordinates and a different link (it overlaps the right eyeball, but instead of looking like a doughnut, it looks like a triangle with a hole).
<area href = "imagemap.html#nose" shape = "circle" coords = "111,51,2">Again (How many times am I going to say this?!), ditto the first area href paragraph with different coordinates and a different link.
<area href = "imagemap.html#mouth" coords = "78,79,157,103">Whenever the shape is omitted, the computer assumes the shape is a rectangle (rect for short). The coordinates of a rectangle are x,y,x,y where the first x,y stands for a corner's x and y coordinates and the second x,y stands for the x and y coordinates of the corner diagonal to the first. Again, ditto the first area href paragraph with a different shape, different coordinates, and a different link.
<area shape = "default" href="imagemap.html#face">Default will cover every space that is not being used by somthing else. Again (the last time I have to say this, wohoo!), ditto the first area href paragraph with a different shape, different coordinates, and a different link.
</map>This command ends the map data.
The computer really only looks at the map part, the image is just for show. The image really means nothing to the computer except defining the height and width of the map. It matches up the coordinates with the map and the image appears over it which gives the appearance that the computer understands the image. It doesn't, the computer really only understands the map and the image it should place. That's why computers are only as smart as their programmers.
First, you'll need a program that'll make GIF or JPEG images. Some programs that I found very effective are Adobe Photoshop, Color It!, and Graphic Converter. After you create your image, you must design your map. You should be able to do this from the information given above. The problem is that it's almost impossible to eyeball the picture and know the coordinates. I've done it and let me tell you that was one of the stupidest things I have ever done. It took me about 7 hours to make the map! Let me save a lot of your time by telling you a much easier way. Make a link to a fake server-side imagemap first. As I said, I haven't made a tutorial for server-side imagemaps yet, but you don't have to actually make the CGI map program or the map for this. Use the following command in your HTML document and watch it work wonders: