Image Maps

1
Image Maps

• Norman White

2
How do we create images that are clickable

• 1) Click anywhere on the image and go to a
  particular
• lta href gtltimg src gt lt/agt
• 2) Click on different parts of the image and go
  to different locations depending on where you
  click.
• IMAGEMAP

3
Clickable Image

• lta hrefhttp//www.stern.nyu.edu/nwhitegt
• ltimg srchttp//www.stern.nyu.edu/nwhite/nhw.jpg
  gt lt/agt
• This will make my image clickable and send user
  to my home page

4
Image Map

• To make different parts of an image clickable,
  you need to provide a map of the image
• ltmap name nhwmap
• ltarea shape rect coords 10,20,50,50
  hrefstuff.htmlgt
• ltarea shaperect coords30,40,60,60
  hrefotherstuff.htmlgt
• lt/mapgt

5
SHAPE Statements beginning with are comments.
Every other non-blank line consists of the
following method URL coord1 coord2 ... coordn
method is one of the following default
- For the default URL Coordinates none
circle - For a circle Coordinates
center edgepoint poly - For a polygon of at
most 100 vertices Coordinates Each coordinate
is a vertex. rect - For a rectangle
Coordinates upper-left lower-right point
- For closest to a point Coordinate
thePoint URL is one of the following A
Local URL ex. /docs/tutorials A
Full URL ex. http//www.yahoo.com/
coord Each coord entry is a coordinate,
format x,y. The number depends on the method.
6
Using the imagemap

• To use the map
• ltimg srcimagename.gif usemapnhwmapgt
• Note nhwmap could also have been
• http//www.stern.nyu.edu/nwhite/doc.htmlnhwmap

7
Advantages of imagemaps

• Allows you to represent an object spatially
• User can see where they will be sent
• makes pages visually more interesting

8
disadvantages

• Client side image maps dont work on all browsers
• Need to be able to create the images AND
  determine the pixel locations of different
  elements (I.e. need tools)
• images take longer to download

9
Lets try.

• Run
• xis\nwhite\multim\lview\lviewp1b.exe