Chapter 16. Interactive Images
Table of Contents
Objectives .............................................................................................................................................. 2
16.1 Introduction .............................................................................................................................. 2
16.1.1 Introduction to Image maps ........................................................................................... 2
16.1.2 The user's viewpoint of image maps .............................................................................. 2
16.1.3 An example of user interaction with an image map ....................................................... 2
16.2 Server-side and client-side image maps ................................................................................... 4
16.2.1 Server-side image maps ................................................................................................. 4
16.2.2 Client-side image maps .................................................................................................. 5
16.3 Implementing client-side image maps in HTML ..................................................................... 5
16.3.1 Images ............................................................................................................................ 5
16.3.2 Relating a map and an image ......................................................................................... 6
16.3.3 Overview of HTML <MAP> tags ................................................................................. 6
16.3.4 The <area> tag ............................................................................................................... 6
16.3.5 Shape ............................................................................................................................. 7
16.3.6 Coordinates .................................................................................................................... 7
16.3.7 Hyperlink ....................................................................................................................... 8
16.3.8 Title text ......................................................................................................................... 8
16.4 Reacting to mouse pointer location: onMouseOver and onMouseOut ..................................... 9
16.4.1 Changing the contents of a text box............................................................................. 10
16.5 Summary exercise .................................................................................................................. 11
16.6 Application and further work ................................................................................................. 11
16.6.1 Activity 4: Creating a rectangular area in an image map ............................................. 11
16.6.2 Activity 5 — Creating a default hyperlink................................................................... 11
16.6.3 Activity 6: Creating an image map for geometric shapes ............................................ 12
16.6.4 Activity 7: Responding to onMouseOver events ........................................................ 12
16.6.5 Activity 8: Controlling frame content from image maps ............................................. 13
16.7 Review Questions .................................................................................................................. 15
16.8 Frame hierarchies ................................................................................................................... 15
16.9 Loading Multiple Documents ................................................................................................ 16
16.9.1 Loading two frames from one link............................................................................... 16
16.9.2 Loading more than two frames from one link............................................................. 17
16.10 Answers.................................................................................................................................. 21
16.10.1 Discussions of Exercise 1 .......................................................................................... 21
16.10.2 Discussions of Exercise 2 .......................................................................................... 21
16.10.3 Discussions of Activity 1 ........................................................................................... 22
16.10.4 Discussions of Activity 2 ........................................................................................... 22
16.10.5 Discussions of Activity 3.......................................................................................... 22
16.10.6 Discussions of Activity 4 ........................................................................................... 23
16.10.7 Discussions of Activity 5 ........................................................................................... 24
16.10.8 Discussions of Activity 6 ........................................................................................... 25
16.10.9 Discussions of Activity 7 ........................................................................................... 26
16.10.10 Discussions of Activity 8 ......................................................................................... 26
16.10.11 Discussions of Activity 9 ......................................................................................... 27
16.10.12 Discussions of the Review Questions ..................................................................... 28
1
, Advanced HTML
Objectives
At the end of this unit you will be able to:
• Use image maps in HTML files;
• Implement client-side image maps;
• Implement mouse events.
16.1 Introduction
16.1.1 Introduction to Image maps
Image maps provide a way for users to interact with graphically presented information in a natural way. If you
have spent time browsing websites with graphics you have probably navigated using image maps.
Definition
Image maps provide a mechanism for specified areas of GIF images to act as a hypertext link, and so link to other
HTML pages or resources.
It is straightforward to create a hypertext reference for an entire image. For example:
<a href=index.html><img src=house.gif></a>
While code as the above is sufficient for images that act as buttons, there are times when navigation can be
simplified, and made more intuitive and interesting by defining different areas of images to link to different
hypertext anchors. Consider the following Web page navigation techniques:
• clicking on a city plan or country map to indicate where you live, and then being linked to a page showing
details of the stores nearest to your area.
• using an information terminal in a shopping complex to click on the store you wish to visit, and then being
taken to a page giving directions from the terminal location to the desired store.
• being presented with the shelves of a virtual, on-line grocery store (i.e. pictures of carrots, apples, bananas,
grapes etc.), and clicking on the apples; and then being presented with pictures of different apple varieties, their
quantities and available prices.
• being presented with a diagram of the product life cycle stages supported by an industry management consultancy
firm, and clicking on the life cycle stage you are considering contracting them for. Then being presented with
case studies, service/pricing examples and contact details.
The above scenarios require the browser/server to respond differently depending on which area of an image is
clicked by the user. All these scenarios, and many more, can be implemented through the use of image maps.
16.1.2 The user's viewpoint of image maps
The user's experience of image maps is simple and intuitive: an image is shown on a Web page; the user clicks the
part of the image that interests them, and a relevant hyperlink is followed.
16.1.3 An example of user interaction with an image
map
Consider the following scenario:
A user wishes to purchase a spare part for their car.
2
, Advanced HTML
The user visits the website for a national chain of car maintenance stores.
The user wishes to order and reserve the part in advance, and then pick up the part in person (to save delivery
charges, and also to check that it fits their car while they are at the store) from their nearest store.
The user has a clear task to first locate the nearest store before both attempting to identify if the part is in stock
and reserving/ordering it. This location task can be straightforward if the user can simply select the area they live
in on a national map to be shown the location of the stores in the area.
In the figure below we see the user being presented with a map of South Africa and being invited to click where
they live:
Let us assume that the user lives in Cape Town (the lower left part of this map of South Africa), and clicks
there. The browser then responds by displaying another map, showing the address of the company's Cape Town
office. See the diagram below:
If the user clicked Midrand, the browser would have responded by displaying the Johannesburg office. See the figure
below:
3
Table of Contents
Objectives .............................................................................................................................................. 2
16.1 Introduction .............................................................................................................................. 2
16.1.1 Introduction to Image maps ........................................................................................... 2
16.1.2 The user's viewpoint of image maps .............................................................................. 2
16.1.3 An example of user interaction with an image map ....................................................... 2
16.2 Server-side and client-side image maps ................................................................................... 4
16.2.1 Server-side image maps ................................................................................................. 4
16.2.2 Client-side image maps .................................................................................................. 5
16.3 Implementing client-side image maps in HTML ..................................................................... 5
16.3.1 Images ............................................................................................................................ 5
16.3.2 Relating a map and an image ......................................................................................... 6
16.3.3 Overview of HTML <MAP> tags ................................................................................. 6
16.3.4 The <area> tag ............................................................................................................... 6
16.3.5 Shape ............................................................................................................................. 7
16.3.6 Coordinates .................................................................................................................... 7
16.3.7 Hyperlink ....................................................................................................................... 8
16.3.8 Title text ......................................................................................................................... 8
16.4 Reacting to mouse pointer location: onMouseOver and onMouseOut ..................................... 9
16.4.1 Changing the contents of a text box............................................................................. 10
16.5 Summary exercise .................................................................................................................. 11
16.6 Application and further work ................................................................................................. 11
16.6.1 Activity 4: Creating a rectangular area in an image map ............................................. 11
16.6.2 Activity 5 — Creating a default hyperlink................................................................... 11
16.6.3 Activity 6: Creating an image map for geometric shapes ............................................ 12
16.6.4 Activity 7: Responding to onMouseOver events ........................................................ 12
16.6.5 Activity 8: Controlling frame content from image maps ............................................. 13
16.7 Review Questions .................................................................................................................. 15
16.8 Frame hierarchies ................................................................................................................... 15
16.9 Loading Multiple Documents ................................................................................................ 16
16.9.1 Loading two frames from one link............................................................................... 16
16.9.2 Loading more than two frames from one link............................................................. 17
16.10 Answers.................................................................................................................................. 21
16.10.1 Discussions of Exercise 1 .......................................................................................... 21
16.10.2 Discussions of Exercise 2 .......................................................................................... 21
16.10.3 Discussions of Activity 1 ........................................................................................... 22
16.10.4 Discussions of Activity 2 ........................................................................................... 22
16.10.5 Discussions of Activity 3.......................................................................................... 22
16.10.6 Discussions of Activity 4 ........................................................................................... 23
16.10.7 Discussions of Activity 5 ........................................................................................... 24
16.10.8 Discussions of Activity 6 ........................................................................................... 25
16.10.9 Discussions of Activity 7 ........................................................................................... 26
16.10.10 Discussions of Activity 8 ......................................................................................... 26
16.10.11 Discussions of Activity 9 ......................................................................................... 27
16.10.12 Discussions of the Review Questions ..................................................................... 28
1
, Advanced HTML
Objectives
At the end of this unit you will be able to:
• Use image maps in HTML files;
• Implement client-side image maps;
• Implement mouse events.
16.1 Introduction
16.1.1 Introduction to Image maps
Image maps provide a way for users to interact with graphically presented information in a natural way. If you
have spent time browsing websites with graphics you have probably navigated using image maps.
Definition
Image maps provide a mechanism for specified areas of GIF images to act as a hypertext link, and so link to other
HTML pages or resources.
It is straightforward to create a hypertext reference for an entire image. For example:
<a href=index.html><img src=house.gif></a>
While code as the above is sufficient for images that act as buttons, there are times when navigation can be
simplified, and made more intuitive and interesting by defining different areas of images to link to different
hypertext anchors. Consider the following Web page navigation techniques:
• clicking on a city plan or country map to indicate where you live, and then being linked to a page showing
details of the stores nearest to your area.
• using an information terminal in a shopping complex to click on the store you wish to visit, and then being
taken to a page giving directions from the terminal location to the desired store.
• being presented with the shelves of a virtual, on-line grocery store (i.e. pictures of carrots, apples, bananas,
grapes etc.), and clicking on the apples; and then being presented with pictures of different apple varieties, their
quantities and available prices.
• being presented with a diagram of the product life cycle stages supported by an industry management consultancy
firm, and clicking on the life cycle stage you are considering contracting them for. Then being presented with
case studies, service/pricing examples and contact details.
The above scenarios require the browser/server to respond differently depending on which area of an image is
clicked by the user. All these scenarios, and many more, can be implemented through the use of image maps.
16.1.2 The user's viewpoint of image maps
The user's experience of image maps is simple and intuitive: an image is shown on a Web page; the user clicks the
part of the image that interests them, and a relevant hyperlink is followed.
16.1.3 An example of user interaction with an image
map
Consider the following scenario:
A user wishes to purchase a spare part for their car.
2
, Advanced HTML
The user visits the website for a national chain of car maintenance stores.
The user wishes to order and reserve the part in advance, and then pick up the part in person (to save delivery
charges, and also to check that it fits their car while they are at the store) from their nearest store.
The user has a clear task to first locate the nearest store before both attempting to identify if the part is in stock
and reserving/ordering it. This location task can be straightforward if the user can simply select the area they live
in on a national map to be shown the location of the stores in the area.
In the figure below we see the user being presented with a map of South Africa and being invited to click where
they live:
Let us assume that the user lives in Cape Town (the lower left part of this map of South Africa), and clicks
there. The browser then responds by displaying another map, showing the address of the company's Cape Town
office. See the diagram below:
If the user clicked Midrand, the browser would have responded by displaying the Johannesburg office. See the figure
below:
3
