|
Home >> FAQs/Tutorials >> XHTML Tutorials and Tips >> Index
XHTML Tutorial - Client-Side Image Maps
(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"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Client-Side Image Map</title>
</head>
<body>
<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
back.</p>
</body>
</html>
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.
(Continued on next topic...)
- What Is an "img" Tag/Element?
- What Are the Attributes of an "img" Element?
- How To Reduce the Display Size of an Image?
- How To Float an Image to the Right Side?
- What Is an Animated Image?
- What Is a Server-Side Image Map?
- What Is a Client-Side Image Map?
- What Is a "map" Tag/Element?
|