Creating a Client-Side Image Map

You can create a client-side image map. The image map allows you to click on different regions in an image and cause the browser to navigate to different URLs. The key element for a client-side image map is map.

The map element contains one or more area elements, each of which denotes a region in the image that can be clicked on.

The attributes for the area element can be broken into two categories.

The first deals with the URL:

The following table lists attributes of the area Element That Relate to the Target

AttributeDescription
hreftarget URL
altThe alternative content.
targetThe browsing content in which the URL should be displayed.
relDescribes the relationship between the current and target documents.
mediaThe media for which the area is valid.
hreflangThe language of the target document
typeThe MIME type of the target document

You use the shape and coords attributes to mark the regions of an image the user can click. The shape and coords attributes work together. The meaning of the coords attribute depends on the value of the shape attribute.

Values for the shape and coords attributes

shape ='rect'

This shape ='rect' represents a rectangular area. The coords attribute must consist of four comma-separated integers representing the distance from the following:

  • The left edge of the image to the left side of the rectangle
  • The top edge of the image to the top side of the rectangle
  • The left edge of the image to the right side of the rectangle
  • The top edge of the image to the bottom side of the rectangle

shape='circle'

This value represents a circular area. The coords attribute must consist of three comma-separated integers representing the following:

  • The distance from the left edge of the image to the circle center
  • The distance from the top edge of the image to the circle center
  • The radius of the circle

shape='poly'

This value represents a polygon. The coords attribute must be at least six commaseparated integers, each pair of which represents a point on the polygon.

shape='default'

This value is the default area, which covers the entire image. No coords value is required.

The following code creates an Image Map

 
<!DOCTYPE HTML> 
<html> 
    <head> 
        <title>Example</title> 
    </head> 
    <body> 
        <p> 
            <img src="http://java2s.com/Book/HTML-CSSImages/star.png" usemap="#mymap" alt="Image"/> 
        </p> 
        <map name="mymap"> 
            <area href="a.html" shape="rect" coords="3,5,68,62" alt="a"/> 
            <area href="b.html" shape="rect" coords="70,5,130,62" alt="b"/> 
            <area href="c.html" shape="default" alt="default"/> 
        </map> 
    </body> 
</html>
Click to view this demo.

map element is associated with img element by linking name attribute from map element and usemap attribute from img.

Home 
  HTML CSS Book 
    HTML  

Related: