Interactive ImagesS2C Home « 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 More 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.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>HTML Tutorials - Advanced HTML Lesson 3 - Interactive Images</title>
</head>
<body>
<!-- Our HTML for interactive images follows -->
<h2>Interactive Images</h2>
<p><img src="http://server2client.com/images/enhancedimagesmall.jpg"
     alt="interaction" 
     width="300" 
     height="200" 
     usemap="#lesson3" />
<map id="lesson3" name="lesson3">
  <area shape="rect"
        alt="paper"
        coords="10,10,156,190" 
        href="javascript:alert('blank sheet of paper');" />
  <area shape="circle"
        alt="apple"
        coords="235,45,50" 
        href="http://server2client.com/pages/apple.html" />
  <area shape="circle"
        alt="tomato"
        coords="230,145,25" 
        href="http://server2client.com/pages/tomato.html" />
</map></p>
<p>Click on something in the picture pls.</p>
</body>
</html>

Save the file in the C:\_HTMLAdvanced folder as lesson_3_webpage.html and close the Notepad.

save more images

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.

interactive images

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.

Related Tutorials

HTML4 Basic Tutorials - Lesson 7 - Images

What's Next?

In the next lesson we look at embedded objects and how to use them in our web pages.

HTML4 Reference

The <map> client-side image map tag

The <area /> client-side image area map tag

go to home page Homepage go to top of page Top