Home >> FAQs/Tutorials >> XHTML Tutorials and Tips >> Index

XHTML Tutorial - Client-Side Image Maps

By: FYIcenter.com

(Continued from previous topic...)

What Is a Client-Side Image Map?

A client-side image map is an image defined with the "ismap" attribute and the "usemap" attribute. When a client-side image map is clicked in a browser window, the browser will take mouse coordinates and map them to a predefined image map entry, to retrieve a target URL. The browser will then redirects to that URL. Here are the rules about "ismap" and "usemap" attributes:

  • ismap="ismap" - Specifies that the image is either a server-side image map or a client-side image map.
  • usemap="#mapReference" - Specifies that the image is a client-side image map, and the map is defined at the specified map reference.

Here is a tutorial example of how to define a client-side image map:

<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  <title>Client-Side Image Map</title>
  <h4>Inline Images</h4>
  <p style="background-color: #eeeeee; padding: 8px;">
   This is a client-side image map test. 
   Click this image <img src="moonrise.jpg" alt="Moonrise"
    width="69" height="91" ismap="ismap" usemap="#mymap"/>
   to see what happens. Use browser back button to come 

If you save the above document as client_image_map.html, and view it with Internet Explorer, you will see an image. You can click it. But nothing will happen, because there is no map entries defined.
            Client Image Map

(Continued on next topic...)

  1. What Is an "img" Tag/Element?
  2. What Are the Attributes of an "img" Element?
  3. How To Reduce the Display Size of an Image?
  4. How To Float an Image to the Right Side?
  5. What Is an Animated Image?
  6. What Is a Server-Side Image Map?
  7. What Is a Client-Side Image Map?
  8. What Is a "map" Tag/Element?

Selected Developer Jobs: