HTML Images - Image Maps Quiz

Quiz 12 12 questions

Prerequisites for the quiz

  1. HTML Images — Image Maps

Are you ready?

12 questions to solve

Instructions
  1. This quiz goes to full-screen once you press the Start button.
  2. 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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.

"I created Codeguage to save you from falling into the same learning conundrums that I fell into."

— Bilal Adnan, Founder of Codeguage