HTML Practice Exercise #5

Since Lesson 1, you have been expanding your knowledge of HTML codes through a series of HTML practice exercises.
These exercises, used in conjunction with the assignments, will culminate in a complete web site.

Image Maps in HTML

An image map is a clickable image which can have different areas link to different URLs. (An example is below.) To make an
image maps, you need to add two groups of codes into your Web page - the first is a map section, which contains area
definitions, and the second is a special img tag, with an add-on to make it use the map.

NOTE: When you create an image map as part of your document, you should always create text links to compliment the
image links. This allows users of non-graphic browsers or those with the images turned off to fully access your page. It also
acts as a backup should your image fail to load.

A. The map tag

This is where you assign a name to your image map, which you will need to use later in the img tag. The name is a required
parameter of the map tag, and the map will not work without it. When used, a map tag will look like this:

<map name="put name here" >

B. The area tag

This is where you assign the individual clickable areas of your image. The area tag has three required parameters - the
shape, the coords, and the href parameter. If an area tag is made without all three, your image map will not work! Here is an
example area tag (note that the things in {}'s are not what you actually put there. Read on for explanations of those.)

<area shape="{put shape type here}" coords="{put coordinates here}" href="{put URL here}" />

C. Shape and coords:

There are three shapes that can be used for an image map - circle, rect, and poly. Each of the shapes requires a different
number of numbers in the coords parameter. The order of the area tags is very important - the first area tag that mentions
an area is the one which is used, so you should make sure you set your small areas first, and the large ones (which may wrap
around small ones) last.

For a circle, you must specify three numbers: The X and Y coordinates of the center of the circle, and the radius.
eg. <area shape="circle" coords="284,131,60" href=" link.htm" />
rect makes a rectangular area clickable, and for it, you need 4 numbers - the X and Y coordinate of the top left corner,
and the X and Y coordinate of the bottom right corner.
eg. <area shape="rect" coords="91,148,194,262" href="link.htm" />
poly is the last type of area tag. It is used to create a polygon, or multi-sided shape, which the viewer can click on.
For coords, it requires a list of X and Y coordinates of all of the points along the edge of the polygon. For
complicated poly shapes, the coords parameter can be very long, and it becomes easy to make mistakes. It is usually
best to keep your poly areas down to 8 points or less.
eg. <area shape="poly" coords="203,213,203,387,325,336" href="link.htm" />
href or nohref - Last is the destination for your clickable area, which is specified by the href field, in exactly the same
manner as the href parameter of the <a> tag. Optionally, if you wish to specify an area, which does not react to being
clicked on, you can replace the href parameter with nohref.
For example, of nohref:
<area shape="default" nohref />
Thus, any area not defined will not react to being clicked on.
 The <img /> tag used here is exactly the same as the normal one, with one addition - you must add
a usemap parameter to it, which points to the map you created previously in your document. For example, an image
map that uses a map named "binky" would look like this:
<img src="clown.gif" alt="[clown image map]" usemap="#binky" />

D. How to find the coordinates:

To make any type of image map, you need to figure out the numerical pixel coordinates of each region within the image that
you want to turn into a clickable link. An easy way to do this is to open the image with Paint Shop Pro (www.jasc.com) and
watch the coordinates at the bottom of the screen as you use your mouse. NOTE: Any image editor should work including
the free ones found in our Class Resources. You can use any portion of an image you wish. To do so, you would first need to
decide which region of the image should be linked to each Web page. You can use rectangles, circles, and irregular polygons
as regions. Once you have the coordinates written down, you're ready to create an image map.

E. To Do

Try creating an image map using the following code as a guide and inserting your own image and coordinates.

A Full Example:

<map name="map1">
<area shape="circle" coords="284,131,60" href=" link1.htm" />
<area shape="poly" coords="203,213,203,387,325,336" href="link2.htm" />
<area shape="rect" coords="91,148,194,262" href=" link3.htm" />
<area shape="poly" coords=" 23,142,194,141,194,12,118,30,69,62" href="link4.htm" />
<area shape="circle" coords="199,199,190" href=" link5.htm" />
<area shape="default" nohref />
</map>

<img src="map1.gif" border=0 usemap="#map1" alt=" [Image Map]" />

Next Step

If you can meet the objectives stated at the beginning of Lesson 5, you are ready to proceed to the next lesson. Keep in mind
the weekly schedule recommended in the course syllabus.

Assignment

Assignment #4 is due this week.

Please visit the Assignments portion of the course for details on Assignment #5.