Client-Side Image Maps in HTML


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.

HTML img Element - Client-Side Image Map
HTML img Element - Client-Side Image Map


HTML 'map' Tag/Element

Server-Side Image Maps in HTML

HTML Inline Images and Image Maps

⇑⇑ HTML Tutorials

2017-03-22, 1499🔥, 0💬