Image Maps

1
Image Maps

• (Going beyond simple image links)

2
Client-side Image Maps

• An image map is one image with multiple
  "clickable" areas
• It allows you to create an image with links
  embedded in various parts of the image

3
Creating an Image Map

• Pick a suitable graphic. This can be any image of
  desire your own picture, your pet, your country
  map, etc.

4
Co-ordinates

• When you've chosen or created your desired image,
  you then insert it into an image editor (well
  use Ms Paint) so that you can find its
  co-ordinates. Try to either write down different
  co-ordinates of take them one by one and then
  insert them into your document. You'll need
  different co-ordinates depending on what sort of
  hot spot" you'd like to use.

5
Hot Spot

• Now that you've got your image and co-ordinates,
  HTML comes to finalize your job
• There are three different shapes (commonly termed
  "hot spots") that can be used in image maps
• RECT
• CIRCLE
• POLYGON

6
Rect

• Rectangle
• Needs two different co-ordinates - Top right and
  bottom left.

7
Circle

• You need the centre co-ordinate (the point in the
  centre of your shape) and it's radius size (not
  the diameter).

8
Polygon

• The most common hot spot used
• Used for when you can't use neither of the above
  hot spots
• Uses the co-ordinates of the points in order. So
  if you're going to have a pentagon (shape with
  five sides), then you list all five co-ordinates
  but make sure they're listed in ORDER. One after
  the other, otherwise you'll confuse some browsers.

9
Map Name

• Image maps require names. This is simply because
  if you are going to include more than one map on
  your page, then to identify which image goes with
  which map, you'll need to name the map.
  Illustration
• .... codes for map....
• ......

10
Area Anchor Tags

• E.g. is a tag that identifies
  which hot spot is being used.
• The anchor tag refers to the URL. So in a
  completed code, they should both look like this
• href"http//www.YourLink.com"

11
Final Code - putting it all together

• border"0" shape"polygon" coords"19,44,45,11,87,37,82,76,49
  ,98" href"http//www.trees.com/save.html" shape"rect" coords"128,132,241,179"
  href"http//www.trees.com/furniture.html" shape"circle" coords"68,211,35"
  href"http//www.trees.com/plantations.html"
  
• NB see this code clearer in the accompanying
  text file.