Server Side Image Maps: Hotspots

1
Server Side Image Maps Hotspots
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 A
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
• Client side

5
Server Side Image Maps

• Key Points
• The web server knows how to map the image, not
  the HTML
• 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

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
• Most browsers can support client side image maps
  now, making them moot

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 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
(284,252)
(0,252)
10
Client side image maps

• Browsers provide instant feedback when are over a
  hotspot in an image (cursor usually changes)
• The web browser, not the server, determines the
  page to request
• But it can be difficult to figure out the
  coordinates for the hotspots
• Third party tools are generally used

11
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

12
ltmapgt Tag

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

13
Rectangular Hotspots

• ltmap nameMyImageMap
• 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

14
Circular Hotspots

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

15
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

16
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

17
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