Chapter 5 – Creating an Image Map
MULTIPLE CHOICE
1. In an image map, either a specific area or several areas serve as which of the following?
a.
tags
c.
hotspots
b.
metalinks
d.
all of the above
2. A hotspot, when clicked, sends the Web page visitor to which of the following?
a.
another part of the same Web page
c.
a different Web page on a different site
b.
a different Web page at the same site
d.
all of the above
3. It is important to test your pages to ensure that they follow ____ standards.
a.
XML
c.
DHTML
b.
CSS
d.
W3C
4. Which of the following should be included on all Web pages that use image maps for navigation?
a.
links referring visitors to the home page
b.
a list of elements in the image maps
c.
captions for the images in the image maps
d.
text links to the URLs reflected in the image maps
5. A Web page that uses an image map for navigation also should include ____ links to the URLs
reflected in the image map.
a.
text
c.
caption
b.
indexed
d.
meta
6. Using ____ links in conjunction with a navigational image map ensures that if the image does not
download or a Web page visitor has images turned off, a user can still navigate to other Web pages.
a.
meta
c.
caption
b.
text
d.
indexed
7. In a server-side image map, the image is displayed by the ____.
a.
server
c.
browser
b.
client
d.
either B or C
8. With a(n) ____ image map, the Web server does all the work.
a.
indexed
c.
coordinated
b.
client-side
d.
server-side
9. In a(n) ____ image map, the image is implemented by a program that runs on the Web server.
a.
indexed
c.
coordinated
b.
server-side
d.
client-side
10. With a(n) ____ image map, the browser does not have to send the x- and y-coordinates of the mouse
click to the Web server.
a.
client-side
c.
server-side
b.
indexed
d.
coordinated
11. With a client-side image map, the ____ of the mouse click are included in the HTML file together with
the URL of the link.
a.
coordinates
c.
indices
b.
pixels
d.
points
12. With a server-side image map, the browser sends the x- and y-coordinates to the Web server for the
position of the ____ on the image map.
a.
index
c.
grid
b.
hybrid
d.
link
13. Server-side image mapping has the advantage that most, if not all, ____, support it.
a.
servers
c.
applications
b.
coordinate tables
d.
browsers
14. When a hotspot on a server-side image map is clicked, additional software is run that is stored on
which of the following?
a.
hard drive
c.
network
b.
CPU
d.
Web server
15. Before coding the image map, you must map the image ____ for each hotspot.
a.
coordinates
c.
pixels
b.
indices
d.
points
16. Which of the following is a step in the creation of an image map for a Web page?
a.
creating the HTML code for the map
b.
sketching the hotspots on the image
c.
mapping the image coordinates for each hotspot
d.
all of the above
17. Which of the following is a possible shape for an image map area?
a.
rectangle
c.
cone
b.
pyramid
d.
all of the above
18. You must use the coordinates for each corner of the shape in which of the following image sections?
a.
rectangular
c.
polygonal
b.
cylindrical
d.
single-point
19. For a circular image section, which of the following is used as a coordinate?
a.
center point
c.
both A and B
b.
corner
d.
neither A nor B
20. Map areas can use any of the following shapes EXCEPT ____.
a.
polygon
c.
indexed
b.
rectangle
d.
circular
21. For a(n) ____ clickable image shape, you use the center point and the radius as the coordinates.
a.
polygonal
c.
circular
b.
rectangle
d.
indexed
22. The ____ tag defines the link and anchors for an image map.
a.
<area>
c.
<a>
b.
<link>
d.
<href>
23. Which of the following areas displays tools that you can use to edit or draw an image when you work
in Paint?
a.
Tools group
c.
status bar
b.
menu bar
d.
drawing kit
24. Where is the image displayed in Paint?
a.
drawing area
c.
status bar
b.
image area
d.
Tools area
25. In Paint, the ____ displays the coordinates of the center of the mouse pointer at its current position on
the image.
a.
menu bar
c.
drawing bar
b.
status bar
d.
toolbox
26. Moving the mouse pointer ____ increases the x-coordinate in Paint.
a.
up
c.
to the right
b.
down
d.
to the left
27. Moving the mouse pointer ____ increases the y-coordinate in Paint.
a.
up
c.
to the right
b.
down
d.
to the left
28. Which of the following sets of coordinates define the hotspot of a circular shape?
a.
14,125
c.
35,18,15
b.
18,45
d.
any of the above
29. A server-side image map uses ____ scripts to make the map work.
a.
Unix
c.
indexed
b.
Perl
d.
CGI
30. The ____ attribute in an <img> tag indicates a server-side image map.
a.
ismap
c.
altmap
b.
usemap
d.
servmap
31. Generally speaking, the ____ attribute indicates the URL of a client-side image map.
a.
servmap
c.
altmap
b.
ismap
d.
usemap
32. Which of the following attributes of the <img> tag specifies the image file to be used?
a.
load
c.
src
b.
file
d.
use
33. A client-side image map is placed with the ____ tags.
a.
<image></image>
c.
<map></map>
b.
<area></area>
d.
all of the above
34. Which of the following represents the general syntax for the <area> tag?
a.
<area area=” ” name=” ” coords=” ” ismap=” “>
b.
<area shape=” ” coords=” “ href=” ” alt=” “>
c.
<area name=” ” ismap=” ” coords=” ” href=” “>
d.
<area usemap=” “>
35. Which of the following tags defines clickable areas within a <map> element?
a.
<click>
c.
<define>
b.
<area>
d.
<clickmap>
36. The ____ attribute of the <map> tag defines the map’s name.
a.
this
c.
ref
b.
name
d.
def
37. The ____ attribute of the <area> tag indicates the points bounding the map area.
a.
bound
c.
map
b.
coords
d.
shape
38. Which of the following attributes of the <img> tag displays alternate text for the image?
a.
caption
c.
alt
b.
text
d.
identify
39. What kind of image map shape would have the following coordinates: 388,154,71?
a.
triangle
c.
polygon (poly)
b.
rectangle
d.
circle
40. Which of the following attributes of the <area> tag sets the coordinates for a linkable area?
a.
points
c.
place
b.
shape
d.
coords
MULTIPLE RESPONSE
Modified Multiple Choice
1. When a Web page visitor clicks a link on a server-side image map, the browser sends the ____
coordinates of the mouse click to the Web server.
a.
a-
c.
x-
b.
b-
d.
y-
2. An image map consists of ____.
a.
an image
b.
a map definition that defines the hotspots
c.
a map definition that defines the URLs to which hotspots link
d.
the resolution setting
3. For a rectangular map area, you use the coordinates of the ____ corners.
a.
bottom-left
c.
top-right
b.
bottom-right
d.
top-left
4. The ____ is a main element of the Paint window.
a.
drawing area
c.
Home tab
b.
Tools group
d.
Colors group
5. ____ may be used to locate the coordinates for the image map.
a.
Microsoft Paint
c.
Mapedit
b.
Image Map Tool
d.
CoffeeCup Image Mapper
MODIFIED TRUE/FALSE
1. All images are appropriate for image mapping. _________________________
2. The y-axis runs horizontally on an image. _________________________
3. For a circular map area, you must use the coordinates for each corner of the shape.
_________________________
4. The url attribute in the <area> tag designates the link used for a map area.
_________________________
5. The dimension attribute in the <area> tag indicates the shape of the map area.
_________________________
TRUE/FALSE
1. The entire image used in an image map must be clickable.
2. Web page developers are always dependent on text-based links to route visitors to other locations.
3. An image map is a special type of inline image in which you define one or more areas for hotspots.
4. A hotspot, when clicked, sends the Web page visitor to another part of the same Web page or to a
different Web page.
5. Images make Web pages more exciting and interesting to view.
6. One of the key features of the Web is its support for graphics.
7. Using a large image has no impact on the amount of time required for pages to download over lower-
speed connections.
8. With a server-side image map, the Web server does all the work.
9. All changes to server-side image maps require that the server administrator maintain and update
necessary server software on a regular basis.
10. An image map available on a particular Web site’s server must be registered to the server before it can
be used.
11. The first step in creating an image map for a Web page is to map the image coordinates for each
hotspot.
12. The sections in an appropriate image are very distinct and easy to see.
13. The x-axis runs along the base of an image.
14. The radius of a circular image map can be calculated by subtracting the center x-axis from the border
x-axis.
15. The x- and y-coordinates are inserted into the <area> tag with the coords attribute, within number
signs and separated by periods.
16. To start Paint, click the Accessories button on the taskbar and then click Paint on the resulting menu.
17. In Paint, the image area is where an image displays.
18. Adobe Photoshop can be used to create images that can be used as image maps or to crop sections out
of existing images.
19. Paint is the only software tool that can be used to identify the coordinates for an image map area.
20. Once a Web page is validated, you know that the initial HTML tags are correct.
21. The ismap attribute specifies an image as a client-side image map and associates the map element’s id
with the image.
22. Some characters are reserved in HTML.
23. The src attribute of the <area> tag displays alternate text for the image.
24. In an image map, if one incorrect number is typed as an x- or y-coordinate, the entire image map can
be wrong as a result.
25. To quit Notepad++, click the Close button on the right-hand side of the status bar.
COMPLETION
1. When an image is used as a link, the entire image becomes the _________________________
element, also called the hotspot.
2. Web page visitors who click a(n) _________________________ are linked to a different part of the
same Web page or to a different Web page.
3. A(n) _________________________ bar is a navigation bar that uses graphical images.
4. In a server-side image map, the _________________________ sends the x- and y-coordinates to the
Web server for the position of the link on the image map.
5. An appropriate image for image mapping is one that has obvious visual
_________________________ and is therefore a good choice as an image map.
6. Inappropriate images for image mapping are ones with indistinct boundaries between
_________________________ of the image.
7. The _________________________-axis runs vertically along the left of the image.
8. The first number of a(n) _________________________ is the x-coordinate, and the second number is
the y-coordinate.
9. The _________________________-axis runs horizontally along the base of the image.
10. You may use a simple or sophisticated _________________________ program to determine section
coordinates.
11. You insert the coordinates for the various map shapes in the <area> tag in the
_________________________ code.
12. The _________________________ utility of Paint enables you to search for information using its
Search option or Index.
13. The _________________________ tool in the Tools group can be used to find the x- and y-
coordinates of the image to be mapped.
14. In Paint, the _________________________ area is where the image displays.
15. Moving the mouse pointer down increases the _________________________ coordinate.
16. The x- and y-coordinates are _________________________ when beginning in the top-left corner of
an image.
17. A(n) _________________________ is a code snippet interpreted by Web browsers to display special
characters.
18. The _________________________ entity is used to display the registered trademark symbol.
19. A(n) _________________________ tag is used to define the clickable areas within a <map> element,
as well as links and anchors.
20. The two main image mapping tags are <map> </map> and _________________________.
PTS: 1 REF: HTML 263
MATCHING
Identify the letter of the choice that best matches the phrase or definition.
a.
ismap
f.
y-coordinate
b.
usemap
g.
x-coordinate
c.
client-side
h.
shape
d.
server-side
i.
href
e.
coords
j.
alt
1. Attribute that indicates a server-side image map.
2. Attribute in the <area> tag indicating the x- and y-coordinates of the points bounding the map area.
3. Kind of image map that does not require additional software on the Web server.
4. Attribute in the <area> tag taking values of rect, poly, or circle.
5. Kind of image map that requires additional software that runs on the Web server.
6. Kind of coordinate numbers that increase as you move the mouse pointer down the image.
7. Kind of coordinate numbers that increase as you move the mouse pointer to the right on the image.
8. Attribute that indicates a client-side image map.
9. Attribute in the <area> tag indicating the URL of the map area.
10. Attribute in the <area> tag indicating the alternate text for image display.
ESSAY
1. Discuss the advantages and disadvantages of server-side image mapping. What are the advantages of
client-side image mapping?
2. Describe in detail the steps in the process of creating a client-side image map.
3. Discuss the steps to determine the x- and y-coordinates for image map points using a chosen software
tool.
CASE
Critical Thinking Questions
Case 5-1
Zach has used image maps on lots of Web sites before, but he has never created his own. He is keen to
follow the correct process to make sure that he does not make any mistakes on his maiden voyage.
1. Which of the following puts the steps for creating a client-side image map into the correct order for
Zach?
a.
select the image to use, map the image coordinates for each hotspot, create the HTML
code for the image map, and sketch the hotspots on the image
b.
select the image to use, sketch the hotspots on the image, map the image coordinates for
each hotspot, and create the HTML code for the image map
c.
select the image to use, sketch the hotspots on the image, create the HTML code for the
image map, and map the image coordinates for each hotspot
d.
select the image to use, map the image coordinates for each hotspot, sketch the hotspots on
the image, and create the HTML code for the image map
2. Zach has been having a lot of trouble mapping the image coordinates for his hotspots and he thinks it
is because he is using an image that is not appropriate for image mapping. Which of the following is
most likely to give him trouble?
a.
an Expressionist painting in the style of Claude Monet
b.
a map of the nations in sub-Saharan Africa
c.
a series of clearly defined two-dimensional geometric shapes
d.
all of the above
Critical Thinking Questions
Case 5-2
Zach has become an expert with image maps through hard work and study.
3. With a simple glance, Zach knows that a given series of coordinates indicate a circular image map
shape. Which of the following are the set of coordinates at which he is looking?
a.
78, 309, 183, 251, 316
b.
317, 344, 136, 402
c.
308, 113, 72
d.
It is impossible to tell from these coordinates.
4. A friend of Zach’s named Ian is frustrated because he is trying to create a client-side image map and it
is not working. Zach takes a quick look at the code and sees that Ian is using the wrong attribute for
the <img> tag. Which of the following attributes is a perfectly valid attribute to use—but just not the
attribute to use for the client-side image map that Ian wants?
a.
ismap
b.
usemap
c.
altmap
d.
servmap