Image Mapping
        Imagemaps are sets of coordinates which confine specific areas of an image to become links (see glossary). In plain english? You tell the computer which areas of a picture you want to be links.
        There are many advatages and disadvantages of using image maps. Let me explain the two types of image maps. There are client-side image maps (which are preferred and most common), and there are server-side image maps, which take longer to load. Okay, why an image map? Think to yourself which you attract more attention, a text link or a graphic. If you didn't say graphic...then, wow...you're a basic person and don't use them. But if you said graphics (which I hope you did, then read on). Graphics will always catch the viewer's eye, so using a graphic as a button or link is a good thing. But don't think they're the savior of webpages...they do have problems. Since you're using images to navagate, your pages will load slower...so finding a good balance between graphics and text is crucial. Designing web-suitable graphics and layouts are covered in the graphics section. Okay, here's the problems with image maps...no BS here...okay, number one, you cannot have mouseovers (see glossary). Mouseovers can only be used with individual images, not mapped ones. Disadvantage number two, the larger the image, the longer it takes to download, which does effect the overall presentation of your webpage. For the mostpart, imagemaps are useful if they are desgined correctly and are efficient.
        Who uses imagemaps? Many people do, since images, in general, provide an enormous amount of flexiblbity when designing a site. But still, if you have many images other than your menu, then you may want to consider sticking with text links. Check out the graphics/layout lecture in the intermediate section for more info.
        Where should you use it? The most ideal purpose for imagemaps are menus. It's a great navagational system. You should place imagemaps in high traffic areas and clearly visible. And make sure the viewers know it's an imagemap, because the most annoying problem with webpages these days are navagational systems that you can't tell are navagational systems.
        So you wanna know how to do an image map? Well, I'll show you client-side image mapping. Why? Because it's more user friendly, and more author friendly. First, you define the <map> tag, using this syntax:
<map name="mapName">
Then you assign the areas that you want to be hyperlinks:
<area shape="rect|circle|poly|default" coords="pixelCoordinates" href="URL">
<area shape="rect|circle|poly|default" coords="pixelCoordinates" href="URL">
<area shape="rect|circle|poly|default" coords="pixelCoordinates" href="URL">
<area shape="rect|circle|poly|default" coords="pixelCoordinates" href="URL">
Then you close the map:
</map>
And finally, you insert your chosen image:
<img src="colorbox.gif" usemap="mapName">
Make sure the two mapnames (in the <map> tag and in the <img> tag) match, otherwise you'll just have an image that isn't linked anywhere. Now to go over the <area> tag. Pick the shape that you wish to use, and that will be assigned to the shape attribute of the <area> tag. Rect is for rectangles, circle is for circles, poly is for any polygon, and default is for any space not assigned. Default must be the last area assigned. Here is the syntax for each of the different shapes:
<area shape="rect" coords="#a,#b , #c,#d" href="URL1">
Where the first set of numbers (#a,#b) is the x,y coordinate of the upper left point of the rectangel, and the second set of numbers (#c,#d) is the x,y coordinate of the lower right point of the rectangle. If the user clicks on the rectange, they'll go to URL1.
<area shape="circle" coords="#a,#b , #c" href="URL2">
Where the first set of numbers (#a,#b) is the x,y coordinate of the center of the circle, and the third number (#c) is the radius of the circle. If the user clicks on the circle, they'll go to URL2.
<area shape="poly" coords="#a,#b , #c,#d , #e,#f , #g,#h , #i,#j" href="URL3">
Where the boundaries will be from the first pair to the second pair (#a,#b to #c,#d), the second pair to the third pair (#c,#d to #e,#f), the third pair to the fourth pair (#e,#f to #g,#h), the fourth pair to the fifth pair (#g,#h to #i,#j) and from the fifth pair to the first pair (#i,#j to #a,#b). Okay, I just created a pentagon. Not necessarily, the sides don't have to be equal length. To add more sides to your polygon, just add more coordinates to the end of the coords attribute. If the user clicks on the pentagon (or whatever polygon you make) they'll go to URL3
<area shape="default" href="URL4">
This will assign ever non-assigned space in the picture to be a link to URL4. That's all there is to it. But I'll show you a demonstration:

Next lecture