Are you looking to learn web development but don't know where to start? Do you struggle to keep track of all the different languages, frameworks, and tools that are used in web development? Look no further! Our web development notes have got you covered.
Our comprehensive notes cover all the ess...
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
The benefits of buying summaries with Stuvia:
Guaranteed quality through customer reviews
Stuvia customers have reviewed more than 700,000 summaries. This how you know that you are buying the best documents.
Quick and easy check-out
You can quickly pay through credit card or Stuvia-credit for the summaries. There is no membership needed.
Focus on what matters
Your fellow students write the study notes themselves, which is why the documents are always reliable and up-to-date. This ensures you quickly get to the core!
Frequently asked questions
What do I get when I buy this document?
You get a PDF, available immediately after your purchase. The purchased document is accessible anytime, anywhere and indefinitely through your profile.
Satisfaction guarantee: how does it work?
Our satisfaction guarantee ensures that you always find a study document that suits you well. You fill out a form, and our customer service team takes care of the rest.
Who am I buying these notes from?
Stuvia is a marketplace, so you are not buying this document from us, but from seller arshshops24. Stuvia facilitates payment to the seller.
Will I be stuck with a subscription?
No, you only buy these notes for $20.49. You're not tied to anything after your purchase.
