Advanced Web Engineering

1
Advanced Web Engineering

• Week 4 - Image Maps Frames

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-sideimage 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 onthe 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-sideimage 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
Implementingclient-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
Frames

• Frames enable the browser window to be split up
  into sections.
• Each frame can display a different document.
• Clicking a link in one frame can display the
  resulting document in another frame.

25
The frame document

• The starting point for frames is an HTML document
  defining the structure.
• The ltframesetgt tag is used to define the number
  and initial sizes of the frames.
• The ltframegt tag defines which document is
  initially displayed in each frame.
• The ltnoframesgt tag defines an alternative
  document to be displayed if the browser does not
  support frames.

26
Example Framesdocument

• ltheadgt
• lttitlegtFrames Examplelt/titlegt
• lt/headgt
• ltframeset rows"60," cols"20,30,"gt
• ltframe src"frame1.htm"gt
• ltframe src"frame2.htm" scrollingyesgt
• ltframe src"frame3.htm"gt
• ltframe src"frame4.htm" scrollingyesgt
• ltframe src"frame5.htm"gt
• ltframe src"frame6.htm" scrollingyesgt
• ltnoframesgt
• Click lta href"noframes.htm"gtherelt/agt to
  view no frames version
• lt/noframesgt
• lt/framesetgt

27
Demonstration

• frames.htm

28
Nested frames example

• ltframeset cols"50,"gt
• ltframeset rows"50,"gt
• ltframe src"frame1.htm"gt
• ltframe src"frame2.htm" scrollingyesgt
• lt/framesetgt
• ltframeset rows"33,33,"gt
• ltframe src"frame3.htm"gt
• ltframe src"frame4.htm" scrollingyesgt
• ltframe src"frame5.htm"gt
• lt/framesetgt
• lt/framesetgt

29
Demonstration

• nestedframes.htm

30
Row and column attributes

• Row and column attributes can be specified in
• pixels e.g. ltframeset rows"150,300,"gt
• percentages e.g. ltframeset rows"20,50,"gt
• The fills remaining space and can produce a
  variety of results
• ltframeset cols"10, , 10"gt
• ltframeset cols", 100,"gt
• ltframeset cols"10, 3, , "gt

31
Borders and spacing

• Netscape IE provide attribute extensions to
  control border size and spacing.
• Examples are
• frameborder yes/no or 0/1
• framespacing
• border
• HTML4 XHTML recommend the use of ltstylegt tags
  or stylesheets instead.

32
Javascript event handling

• The HTML 4 XHTML standards provide event
  handlers to enable the use of Javascript code
• onLoad - frame is first loaded or resized
• onUnload - frame is unloaded
• onBlur - window containing frameset loses focus
• onFocus - window containing frameset becomes
  active
• Example
• ltframeset onLoad"window.alert('Everything
  loaded. You may now continue.')gt

33
Named frames

• Frames can be assigned a name using the name
  attribute
• ltframe src"frame3.htm" name"homepages"gt
• A hyperlink target can then be assigned to a
  particular named frame
• lta href"new.htm" target"main"gtClick herelt/agt

34
Special Targets

• _blank newly opened, unnamed window
• _self current frame (default)
• _parent frameset containing the current frame
• _top current window (removing frames)
• Note that any other target beginning with _ will
  be ignored so don't use this in the name
  attribute for a frame.

35
ltbasegt default target

• Specifying a target for every hyperlink is not
  required.
• Use the ltbasegt tag in the header to set a default
  target
• ltbase target"defaultframe"gt
• This can be overridden for individual hyperlinks
  as required.

36
Detailed Example

• This example combines frames with a client-side
  image map.
• santaframe.htm provides a 3 frame browser.
• The left column is a hyperlinked table of
  contents.
• The right column is split between a client-side
  image and a target frame.

37
Demonstration

• santaframe.htm

38
The start - santaframe.htm

• ltframeset cols"20,"gt
• ltframe src"contents.htm"gt
• ltframeset rows"70,"gt
• ltframe src"santa.htm" name"main"
  scrollingyesgt
• ltframe src"frame3.htm" name"homepages"gt
• lt/framesetgt
• lt/framesetgt

39
The image mapsanta.htm

• ltimg src"santa.jpg" usemap"map1" border0gt
• ltmap name"map1"gt
• ltarea shapecircle coords"299, 162, 31"
  href"liz.htm"
• target"homepages"gt
• ltarea shapecircle coords"375, 158, 29"
  href"tony.htm"
• target"homepages"gt
• ltarea shapecircle coords"532, 194, 30"
  href"pauline.htm"
• target"homepages"gt
• ltarea shapecircle coords"675, 226, 34"
  href"lisa.htm"
• target"homepages"gt
• ltarea shapecircle coords"120, 318, 26"
  href"katy.htm"
• target"homepages"gt
• ltarea shaperect coords"247, 185, 339, 361"
  href"melody.htm"
• target"_top"gt
• lt/mapgt

40
Table of contents - contents.htm

• ltheadgt
• lttitlegtImage Map Examplelt/titlegt
• ltbase target"homepages"gt
• lt/headgt
• ltbodygt
• lth1gtContentslt/h1gt
• ltulgt
• ltligtlta href"liz.htm"gtLizlt/agtlt/ligt
• ltligtlta href"tony.htm"gtSanta!lt/agtlt/ligt
• ltligtlta href"pauline.htm"gtPaulinelt/agtlt/ligt
• ltligtlta href"lisa.htm"gtLisalt/agtlt/ligt
• ltligtlta href"katy.htm"gtKatylt/agtlt/ligt
• ltligtlta href"melody.htm" target"main"gtMelodylt/
  agtlt/ligt
• lt/ulgt

41
Resources

• Web Developer's Virtual Library (WDVL)
• http//www.stars.com/Authoring/
• WDVL specific links information on frames
• http//www.stars.com/Authoring/HTML/Frames/
• Many books!
• These slides were based on Chapters 6 11
  of"HTML XHTMLThe Definitive Guide", Musciano
  Kennedy, O'Reilly.