A Smarter Way To Learn HTML & CSS(2015)

36
Image maps part 2

You’ve placed an image on the page, and you’ve connected it to an image map by writing, within the img tag, usemap="#buildings". Then you’ve started an image map definition with the line…

<map name="buildings">

Here’s the whole thing.

These are the parts of each map section.

1. The shape of the area. Write "rect" for rectangle, "circle" for circle, or "polygon" for polygon.

2. Alternative text for screen readers. You learned about this in Chapter 2

3. The screen coordinates that define the area. See below for how to get these coordinates. Examples: For a rectangle, coordinates of 76,42,279,510 mean the clickable rectangle begins 76 pixels in from the left edge of the image and 42 pixels down from the top of the image, and extends right by 279 pixels from the left edge of the image and 510 pixels down from the top of the image. For a circle, coordinates of 100,60,10 mean the clickable circle has a center at 100 pixels in from the left edge of the image and 60 pixels down from the top of the image, and has a radius of 10 pixels. For a polygon, coordinates of 150,217,190,257,150,297,110,257 create a diamond shape. The top point of the diamond is 150 pixels in from the left edge of the image and 217 pixels down from the top of the image. The right point of the diamond is 190 pixels in from the left edge of the image and 257 pixels down from the top of the image, and so on. Three sets of coordinates create a triangle area, five sets a pentagonal area, and so on.

4. The Web address for the page to load when the user clicks the area.

Rather than trying to create an image map by hand, automate the task with a utility that does most of the work for you, including the fussy work of establishing coordinates. Web development tools like Dreamweaver include such a utility. You can also use a free online image map creator like the one at http://www.image-maps.com. My favorite tool for creating image maps is Mapedit, a downloadable program from http://www.boutell.com. There’s a generous free trial period, after which you pay $15.

1. In your HTML file insert a break after the robo_guy.png image.

2. Create an image map using http://www.asmarterwaytolearn/stooges.jpg

3. I’ve mapped the Stooges’ faces as three clickable areas. They’re circles. The coordinates are 56,56,47…126,93,31…and 208,66,3

4. Do a Google search for each of the Stooges. Copy the Google URLs that the searches generate and use them as the links. For example, when the user clicks Curly’s face, she’s taken to the Google search for Curly.

5. Save the file and display the page. Click on each of the faces.

Sample HTML code is at:
http://asmarterwaytolearn.com/htmlcss/practice-36-1.html

Find the interactive coding exercises for this chapter at:
http://www.ASmarterWayToLearn.com/htmlcss/36.html

A Smarter Way To Learn HTML & CSS(2015)

36Image maps part 2

36
Image maps part 2