Image Maps Quiz - HTML Images

Are you ready?

12 questions to solve

Instructions

This quiz goes to full-screen once you press the Start button.
At the end of the quiz, you are able to review all the questions that you answered wrong and see their explanations.

How do we make an <img> element be associated with a server-side image map?

The ismap attribute of an <img> element states that the element is associated with a server-side image map. Such an <img> is customarily wrapped up in an <a> element; when the image is clicked, the browser opens the href of the <a>, passing it the coordinates of the click in the query string.

Hence, the correct choice is (A). For more info, refer to HTML Images — Image Maps: Server-side image maps.

Using the ismap attribute on the <img> Using the servermap attribute on the <img> Server-side image maps are no longer supported

Which of the following elements can be nested inside a <map> element?

A <map> element, contrary to what we might think, can contain other elements besides <area> — the likes of <p>, <ul>, <a>, etc. Hence, all of the given choices are correct. For more info, refer to HTML Images — Image Maps: Things to note.

<area> <p> <a>

Which of the following attributes is used to specify the shape represented by an <area> element?

The shape attribute defines the shape of an <area> element. Since there is no such attribute mentioned below, the correct choice is (D). For more info, refer to HTML Images — Image Maps: More about the <area> element.

form area figure None of these

Which of the following shapes can be represented by an <area>?

An <area> can represent a circle and a polygon, and also a rectangle, but a polygon can be used to create any shape having 3 or more than 3 sides. Thus, all of the shapes mentioned below can be created using an <area>. For more info, refer to HTML Images — Image Maps: The <map> and <area> elements.

Triangle Rectangle Circle Pentagon (five-sided shape) Heptagon (seven-sided shape)

The order of <area> elements inside a <map> doesn't matter. True or false?

False; the order of <area> elements matters. For more info, refer to HTML Images — Image Maps: Things to note.

True False

Which of the following statements describes what a 'hotspot' is in an image map?

A hotspot in an image map, denoted via an <area>, is a clickable region, tied to a given URL (using the href attribute of the <area>), and marked by a given shape (using the shape attribute). This means that all of the statements below are valid descriptions of a hotspot. For more info, refer to HTML Images — Image Maps: The <map> and <area> elements.

A clickable region An area tied to a given URL An area marked by a particular shape (circle, rectangle, triangle, etc.)

An <area> element should have which attribute set in order to make the context of the underlying hyperlink clear?

The alt attribute makes the context of an <area> element clear. That is, it clearly specifies what the <area> links to. For more info, refer to HTML Images — Image Maps: More about the <area> element.

alt title desc

Image maps are responsive by default. That is, if an image associated with an image map shrinks or expands in size, the map will update its hotspot regions accordingly. True or false?

False; image maps aren't responsive by default. To make image maps responsive, we need additional power from JavaScript. For more info, refer to HTML Images — Image Maps: Things to note.

True False

How many integers should be specified in coords when an <area> represents a circle? What does each integer denote?

When the shape of an <area> is a circle (that is, shape="circle"), the coords attribute has the following general form: x, y, r. The two integers x and y specify the x and y coordinates of the center of the circle, while r specifies the circle's radius. This goes with choice (B). For more info, refer to HTML Images — Image Maps: More about the <area> element.

3; the first integer represents the radius of the circle, whereas the last two integers specify the x and y coordinates of the center of the circle 3; the first two integers specify the x and y coordinates of the center of the circle, while the third represents the radius of the circle 4; the first two integers specify the x and y coordinates of the top-most point of the circle, whereas the last two integers specify the x and y coordinates of the center of the circle 4; the first two integers specify the x and y coordinates of the center of the circle, whereas the last two integers specify the x and y coordinates of the top-most point of the circle

Is it valid to have a single <map> element associated with multiple <img>s in an HTML document?

It's perfectly valid. One <map> can be used to serve as a map for more than one <img> element. Hence, the correct choice is (A). For more info, refer to HTML Images — Image Maps: Things to note.

Yes No

How do we tie an <img> element with a given <map> element?

The <img> element's usemap attribute gets the name (unique in the document) of the <map> to associate it with. (Note that usemap's value begins with the # symbol, followed by the name of the map.) Hence, the correct choice is (C). For more info, refer to HTML Images — Image Maps: Server-side image maps.

A unique name is given to the <map> using its ref attribute; the <img> is then associated with the map using its own usemap attribute A unique name is given to the <map> using its ref attribute; the <img> is then associated with the map using its own clientmap attribute A unique name is given to the <map> using its name attribute; the <img> is then associated with the map using its own usemap attribute A unique name is given to the <map> using its name attribute; the <img> is then associated with the map using its own clientmap attribute

How many integers should be specified at the minimum when an <area> represents a polygon?

Very simple: since a polygon must have at least three vertices, we need to specify three points on the map for it. Each point corresponds to two integers — the x and y coordinates of the point. This means a minimum of 6 integers. This goes with choice (D). For more info, refer to HTML Images — Image Maps: More about the <area> element.

3 4 5 6

HTML Images - Image Maps Quiz

Are you ready?

More courses

Elementary Logic

Advanced JavaScript