We continued our investigation of images when we looked at image flexibility using the <figcaption>, <figure>, <picture> and <source> tags in the HTML5 Intermediate Tutorials - Image Flexibility lesson.
The Map Element
The <map> tag and its' closing </map> tag are used with its required id attribute to define a client-side image map that has clickable areas. The usemap attribute of the <img> tag is used to specify a mapname that binds the image to the map and must match the name attribute of the <map> tag, for the binding to work.
The Area Element
Click on an object in the picture to interact with it.
Reviewing Our Changes
There are three objects in the image above and if you mouseover them, while viewing the file in your favourite browser, you will notice the cursor changes. Click on an object to see the effects. You can also use polygonal shapes for clickable areas as well as circles and rectangles, so you can basically map to any shape you need with the right coordinates.
Lesson 3 Complete
Play around with the HTML code and change the coordinates to see the effects on the image.
In the next lesson we look at embedded objects and how to use them in our web pages.
The <area> client-side image area map tag
The <img> image tag
The <map> client-side image map tag