A Smarter Way To Learn HTML & CSS(2015)

35
Image maps part 1

An image map is special type of clickable image. Your code sections it into two or more parts. If the user clicks one section of the image, a new page loads. If he clicks another section, a different page loads. For example, you might have a photograph showing six historical buildings in a town square. When you click on a particular building, a page loads that tells the story of the building.

Image maps require quite a bit of code, so I’m going to divide the subject into two chapters.

Let’s say your image is “6-buildings.jpg.” You begin with a standard img tag.

<img src="6-buildings.jpg" alt="6 historial buildings" width="800px" height="550px">

Within the tag you specify the name of the image map that’s going to divide up the photo into clickable regions.

<img src="6-buildings.jgp" alt="6 historial buildings" width="800px" height="550px" usemap="#buildings">

Give the map any name you like as long as it doesn’t include spaces. Precede the name with #.

Next you code the image map. It’s a section of code that begins with an opening map tag and ends with a closing /map tag.

<map name="buildings">
[Here you define each of the sections and give their
link addresses. I’ll cover this in the next chapter.]
</map>

Notice that the map name, “buildings,” is the same name you specified in the img tag, but without the #. You’ve now told the browser to display the picture of the six buildings, and to connect the picture to an image map named “buildings.” In the next chapter, we’ll create the map itself.

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