COMM1T Web Engineering

1
COMM1T Web Engineering

• Week 8 - Image Maps

2
Image Maps

• If an image is embedded within the ltagt tag then
  the complete image becomes a hyperlink.
• It is possible to embed many hyperlinks inside a
  single image.
• These are called image maps.
• There are two types of image map
• server-side image maps
• client-side image maps

3
Server-side image maps

• An embedded image is made mouse-sensitive using
  the ismap attribute.
• lta href"/cgi-bin/imagemap/test.map"gt
• ltimg ismap src"test.jpg"gt
• lt/agt
• The href link is the URL of a server application
  or related map file.
• When the user clicks the image with the mouse the
  coordinates are passed to the HTTP server
• /cgi-bin/imagemap/test.map?35,56
• Coordinates are (x,y) from the top left of the
  window.

4
Processing on the server

• The map URL and coordinates are passed to the
  server.
• Processing is server-specific.
• Most servers provide a software utility to handle
  image maps.
• Generally these require an additional text file
  holding the 'region definitions' and page to be
  displayed for each.
• The coordinates are matched against the region
  definitions and the appropriate web page returned
  to the browser.

5
The image map file

• The image map file contains the following
  information
• The geometric shape of the region on the image.
• The size and location.
• The URL to be displayed.
• There are two formats for map data
• CERN (European Laboratory for Particle Physics)
• NCSA (The National Centre for Supercomputing
  Applications)

6
Client-side image maps

• No need to have access to a server on which to
  place the image map.
• No delays when browsing as the browser does not
  need to repeatedly pass information to the server
  to process.
• Consistent format for map files so more portable.
• Now supported in Netscape 4.7 IE 5.

7
Implementing client-side maps

• Use the usemap attribute of the ltimggt tag
• ltimg src"test.jpg" usemap "testmap"gt
• Use the ltmapgt tag to define the regions and URLs
  for the image map
• ltmap name "testmap"gt
• The name attribute must be unique to this ltmapgt
  but may be referenced by more than one image.

8
The ltareagt tag

• Within the ltmapgt tag are ltareagt tags for each
  region
• The basic format is
• ltarea shape??? coords??? href???gt
• The following geometric shapes are supported
• circle or circ
• poly or polygon
• rect or rectangle
• default (all remaining sections of the image)

9
Circle coordinates

• coords "x, y, r"

. (x,y)
r
10
Polygon coordinates

• coords "x1, y1, x2, y2, x3, y3....."

(x1,y1)
(x2,y2)
(x5,y5)
(x3,y3)
(x4,y4)
11
Rectangle coordinates

• coords "x1, y1, x2, y2"

(x1,y1)
(x2,y2)
12
A basic example

• ltimg src"house.jpg" usemap"map1" border2gt
• ltmap name"map1"gt
• ltarea shaperect coords"75,69,434,278"
  href"yellow.htm"gt
• ltarea shaperect coords"554,69,730,403"
  href"blue.htm"gt
• ltarea shaperect coords"75,360,436,502"
  href"green.htm"gt
• ltarea shaperect coords"554,402,730,502"
  href"orange.htm"gt
• ltarea shapecircle coords"181, 144, 64"
  href"black.htm"gt
• lt/mapgt

13
Demonstration

• house1.htm

14
Overlapping areas

• Note that in the previous example the black
  circle was not activated.
• Coordinates may overlap each other.
• If so the first ltareagt tag takes precedence.
• If a "default" shape type is included it must be
  the end.

15
Ensuring the black circle is active

• ltimg src"house.jpg" usemap"map1" border2gt
• ltmap name"map1"gt
• ltarea shapecircle coords"181, 144, 64"
  href"black.htm"gt
• ltarea shaperect coords"75,69,434,278"
  href"yellow.htm"gt
• ltarea shaperect coords"554,69,730,403"
  href"blue.htm"gt
• ltarea shaperect coords"75,360,436,502"
  href"green.htm"gt
• ltarea shaperect coords"554,402,730,502"
  href"orange.htm"gt
• lt/mapgt

16
Demonstration

• house2.htm

17
The alt attribute

• The alt attribute can be added to attach a text
  label to the area.
• Most browsers display this text as a "tooltip"
  when the mouse moves over the area.
• For a non-graphical browser the alt attribute
  enables a list of text-based hyperlinks to
  replace the image.

18
onMouseOver attribute

• The onMouseOver attribute enables Javascript code
  to be executed when the mouse passes over the
  area.
• This can be used as an alternative to the alt
  attribute to display information in the status
  bar.

19
href attribute

• The href attribute generally identifies the
  target URL.
• If an area is required without a target then
  nohref must be used instead.
• Alternatively href can be used to perform an
  action using Javascript.

20
Further examples

• ltarea shaperect coords"75,360,436,502"
  href"green.htm"
• alt"Green Room"gt
• ltarea shaperect coords"554,402,730,502"
  href"orange.htm"
• onMouseOver"self.status'Orange
  Room' return true"gt
• ltarea shapedefault
• href"javascriptwindow.alert('Select
  coloured area')"gt

21
Demonstration

• house3.htm

22
Handling other browsers

• To provide an alternative for browsers not
  supporting client-side image maps include ltimg
  usemapgt inside an ltagt tag
• lta href"alternative.htm"gt
• ltimg src"house.jpg" usemap"map1" border2gt
• lt/agt
• ltmap name"map1"gt
• ...
• lt/mapgt
• Browsers not supporting image maps will display
  alternative.htm if the user clicks inside the
  image.

23
Backwards compatibility

• The following combines a server-side image-map
  with a client-side image map
• lta href"/cgi-bin/imagemap/test.map"gt
• ltimg src"house.jpg" usemap"map1" border2gt
• lt/agt
• ltmap name"map1"gt
• ...
• lt/mapgt
• If the browser supports client-side image maps
  then this faster method will be used.

24
Demonstration

• santaframe.htm