Class notes

Web Programming/Development Course Notes

3 views 0 purchase

Course
CPRG 213A

Institution
Southern Alberta Institute Of Technology (SAIT )

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...

[Show more]

Preview 3 out of 28 pages

View example

Uploaded on February 25, 2023
Number of pages 28
Written in 2022/2023
Type Class notes
Professor(s) Unknown
Contains All classes

html
css
javascript
php
sql
python
ruby
java
typescript
react
angular
django
flask
ruby on rails
bootstrap
foundation
materialize
jquery
ajax
c
vuejs
nodejs
aspnet
expressjs

CA$30.37

Add to cart

Add to wishlist

100% satisfaction guarantee
Immediately available after payment
Both online and in PDF
No strings attached

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

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 CA$30.37. You're not tied to anything after your purchase.

Can Stuvia be trusted?

4.6 stars on Google & Trustpilot (+1000 reviews)

56326 documents were sold in the last 30 days

Founded in 2010, the go-to place to buy study notes for 14 years now

Start selling