Lesson 3 - Interactive Images
In Lesson 7 of the Intermediate HTML tutorials we looked at enhancing our web pages with images. Now we find out how to make those images interactive by allowing the user to click on parts of the image to process an action.
The map Tag
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 Tag
The <area /> tag is a self closing tag used within the </map> </map> element to define the clickable areas.
Viewing the Tags
So lets get all interactive and see how this works!
Open the file with Notepad we created and tested in Lesson: 2 A Final Tour Of Text Tags
You saved the file to your computer in the C:\_HTMLAdvanced folder as lesson_2_webpage.html
Copy and paste the following code into the reopened file, overwriting the existing contents.
Save the file in the C:\_HTMLAdvanced folder as lesson_3_webpage.html and close the Notepad.
Viewing Our Changed File
From the C:\_HTMLAdvanced folder, double click on the saved file and it will appear in your default web browser and look something like the following image.
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.