Image Maps

1
Image Maps
2
What is an image map?

• Its an image with hyperlinks assigned to all or
  part of the image
• Used to navigate a user to different pages
  depending on where they click in the image
• Can be more intuitive than using regular links

3
Image Map Example
This part of the picture may link to external
Site B
This part of the picture may link to Page A, same
site
This image may not link to anything
4
Types of image maps

• Server side
• Early browsers could only handle this kind
• Not very useful anymore
• Client side
• The kind we will use

5
Server Side Image Maps

• Key Points
• The web server knows how to map the image
• not the browser
• There is usually a program on the server which
  interprets the coordinates of the mouse when the
  image is clicked
• This program determines the next web page to be
  presented
• Rarely seen and nearly obsolete
• Slow, added network traffic, added server load

6
Server Side Image Maps
Sends Mouse Click Coordinates
Relays Coordinates
Your Computer
Web Server
CGI Program
Sends URL to load
Passes appropriate web page
Interprets Coordinates
7
Problems with Server Sides Image Maps

• Slow
• Require a program to interpret coordinates
• No feedback to user prior to clicking on the
  image
• Browsers now support client side image maps

8
Client Side Image Maps

• HTML tags logically break an image into pieces
• A link is associated with one or more pieces of
  the image
• An image can be broken up into rectangular,
  circular or arbitrary polygonal shapes
• Coordinates are measured from the top left corner
  of the image, which is 0,0
• All measures are in pixels

9
Image Map Coordinates
X Increased Rightward
(0,0)
(284,0)
Y Increases Downward
(0,252)
(284,252)
10
Client side image maps

• Browsers provide instant feedback when the cursor
  is over a hotspot in an image
• cursor usually changes in appearance
• The web browser, not the server, determines the
  page to request
• It can be difficult for the web designer to
  figure out the coordinates for the hotspots
• Microsoft Paint (free with Windows) or other tool
• The ISMAP attribute of an image tag can be used

11
The ISMAP trick

• To map out coordinates of the image thingy.gif
• Create a dummy html document which includeslta
  href""gtltimg src"thingy.jpg" ismapgtlt/agt
• Open the dummy page in a browser
• When the cursor is above the image, its
  coordinates are displayed at the end of the url
  in the status bar

12
Creating client side image maps

• Use the ltmapgt tag to define the hotspots
• In the ltimggt tag use the USEMAP attribute to
  associate the image with the hotspots
• You could actually use the same map with multiple
  different images, though practical use of this
  feature is hard to find

13
ltmapgt Tag

• ltmap namemapnamegt
• ltarea shapeshape coordscoordinates
  hrefurl /gt
• lt/mapgt

14
Rectangular Hotspots

• ltmap nameMyImageMapgt
• ltarea shaperect coords5,45,108,157
  hrefMitchell.htm /gt
• lt/mapgt
• Hotspot is defined from top left (5,45) to
  (108,157) at bottom right
• Mitchell.htm is the page loaded when this hotspot
  is clicked

15
Circular Hotspots

• ltmap nameMyImageMapgt
• ltarea shapecircle coords161,130,49
  hrefBrinkman.htm/gt
• lt/mapgt
• Center of hotspot is defined at (161,130).
  Hotspot extends for 49 pixels in all directions
  from this point
• Brinkman.htm is loaded when this hotspot is
  clicked

16
Polygon Hotspots

• ltmap nameMyImageMapgt
• ltarea shapepoly coords29,4,29,41,111,41,111,7
  8,213,78,213,4 hrefByrd.htm /gt
• lt/mapgt
• Hotspot is inside polygon from (29,4) to (29,41)
  to (111,41) to (111,78) to (213,78) to (213,4)
• First and last X or Y coordinates need to be the
  same
• Byrd.htm is loaded when this hotspot is clicked

17
Using an Image Map

• ltimg srcLayout.gif usemapLayout /gt
• Must precede map name with a
• Must place in double quotes
• Advantage of separate tag is you can use one
  image map for more than one image
• Generally good idea to have ltmapgt precede ltimggt
  tag for readability

18
Image Borders

• Very old browsers will put borders around the
  images with hotspots
• Generally this spoils the effect of the graphic,
  although it acts as a visual aid
• For portability its best to specify a BORDER of
  0 length
• ltimg srcimage border0gt
• If border attribute is used it places a border of
  X pixels around images