<img src="picture">
The change is that you will add two extra attributes. The first attribute you add is "ismap". The second is the "usemap" attribute. Something like:
<img src="picture" ismap usemap="#mapname">
These new tags tell the browser two things: ismap says that this is a image map, and usemap tells the browser where to look for the rest of the image map definition (we'll get to this in a second). "mapname" can be anything you want, provided you use the same name in the other section for the image map.
<map name="mapname">
"mapname" can be anything you want provided that you put the same name in the usemap attribute of the img tag (note that it is usemap="#mapname" not just usemap="mapname"). The name attribute tells the browser what the name of this map is so that it will know which image to use it for. This allows you to have multiple image maps on a page.
After the <map> tag come several area tags. These tags define which areas on the image go to which link. It has 3 normal attributes: shape, coords, and href. These attributes pretty much do what you think they would. href (like in the <a> tag) is the URL to link to, coords is the coordinates (remember those x and y things from pre-calc? they're baaack...), and shape is, well, the shape. This will make more sense with an example:
< area shape=rect coords="0,0,30,20" href="http://grove.ufl.edu/~u3063bnk">
This tag defines a rectangular area on the image that if you click on it will send you to our home page. The location of this rectangle is "0,0,30,20".
A couple of notes on these coords. First, the numbers are in "pixels" which is the measurement of choice for pictures (it represents the dots on the monitor). 0,0 is the upper left corner of the picture. 30,20 means 30 pixels to the right and 20 pixels down, kinda like this (note these are just made up numbers):
0,0............20,0.........100,0 .... . . . . . . . . 0,10 . . . . 30,20 . . . 0,50.........................100,50
The number of coordinates you have to give for the coords attribute depends on what shape you are using. For "rect", which is a rectangle, you need to give 4 numbers. These represent the upper-left x-coordinate, the upper-left y-coordinate, the lower-right x-coordinate, and the lower-right y-coordinate. The cirlce shape requires 3 numbers: the x-coordinate of the center, the y-coordinate of the center, and the radius (in pixels). These are the two most common shapes. The third shape is called poly and is a bit tricker. Poly stands for polygon which is just a shape made of straight lines. For this shape the coords attributes lists the corners of the shape in x,y coordinate pairs. Use this to define a shape that isn't a cirle or a rectangle. The last possible value for shape is "default". This is link that will be used if the user click the picture outside of any of the other areas. This is how you handle on the areas between the other shapes. The coords attribute does not affect areas of shape default as you can only have one default.
Okay, now lets do an example. For this example I am going to use this picture named "imap.gif".
The different links I want to make are for the triangle, rectangle, circle, and the rest of the picture. The first thing I need are the coordinates of those places so that I can make the <area> tags. One of the easier ways to get the coordinates of a map is as follows. Firstly, instead of just displaying this picture with a <img src="imap.gif"> tag, I did
<a href="http://blah"><img src = "imap.gif" border=0 ismap></a>
This told the browser to make this an image map and link it to blah (which doesn't exist). The nice thing about putting the img tag within a link like that is that it displays the coordinates of the picture when you put the mouse over it. If you place the mouse pointer to be pointing at the upper left corner of the red rectangle, then look down at the bottom you will see "http://blah?8,5" so the upper left corner of that rectangle is 8,5 (8 to the right, and 5 down from the upper left corner of the whole picture). Do the same for the bottom right and you should get 74,36 (numbers may be slightly off). For the circle point to about the middle (109,45) and the right edge (133,45) then subtract the x-coordinate (first number) to get the radius (24) (These numbers are approximate, the shape isn't really a circle). For the trianlge, point to each corner (vertext) to get (14,47), (14,88), (64,88). Lastly, get the coordinates of the bottom right of the picture (155,95) (for the default shape).
Secondly, since we now have the coordinates for the different shapes inside the picture, lets see the actual html code that will do this, first the <map..> (using those coordinates) then the <image> tag:
<map name="shapes"> <area shape="rect" coords="8,5,74,36" href="rect.html"> <area shape="circle" coords="109,45,24" href="circle.html"> <area shape="poly" coords="14,47,14,88,64,88" href="triangle.html"> <area shape="default" coords="0,0,155,95" href="backg.html"> </map> <img src="imap.gif" usemap="#shapes" ismap>
You can have spaces in the coordinates as long as you have " around them, so the rect shape could have been
<area shape="rect" coords="8,5, 74,36" href="rect.html">
if it is easier for you to see. Always use the " for the coords attribute. If two or more <area> tags overlap in their shape regions, the first one will be used. For this reason, if you use a "default" shape, it must be the last area. The <img> tag can have attributes (such as width and height discussed previously). Note that the <a ..> tag used earlier isn't there any more, it was just so we could get the browser to display the coordinates. (You shouldn't have the image map inside of a link once you have all the coordinates.) Now the browser displays the link inside the href attribute for each area.
Just so you know (for you advanced users), you can also use a target attribute in the
<area ..> tag for frames and you can use most of the same Javascript calls (like
onMouseOver) that you can use on a regular <a href=...> tag.
Try typing out the following. Also use your own stuff. Be imaginative!