1. Image Map You can define a region on your image as clickable. Add usemap=“mapname” parameter to your image. Add a tag to your html where name of map tag is “mapname”. Three kinds – Rectangle – Circle – Polygon

2. Image Map Parameters of map: – Name: name of image map. Parameters of area: – Shape: shape of area: rect, circle, poly – Coords: coordinates (next slide) – Alt: Alternative text. – Href: link.

3. Shape Coordinates Shape types and coordinates: – shape=rect coords="left-x, top-y, right-x, bottom- y" – shape=circle coords="center-x, center-y, radius" – shape=poly coords="x1,y1, x2,y2, x3,y3,..." X Y

4. Add an image map to your html http://www.bilkent.edu.tr/~ussakli/images/logos.gif Add above image to the top of your page and display it. Add a map tag to somewhere in body of your html, with a name “logosmap”. Add a parameter to your image to use this map: usemap=“#logosmap"

5. Add an image map to your html Add a rectangle with coordinates “3, 3, 96, 74” with alternative text “Adidas Web Site”, with a link http://www.adidas.com and target to Sports window.http://www.adidas.com See if it works. Do the same thing to get the following result.