Creating a Client-Side Image Map
Description
You can create a client-side image map: clicking on different regions in an image causes the browser to navigate to different URLs.
The key element for a client-side image map is map
with local attributes name.
If the id attribute is used,
it must have the same value as the name attribute.
The map element can have one or more area elements.
Each area element marks a region in the image that can be clicked on.
The area element has local
attributes:alt, href, target, rel, media, hreflang, type, shape, coords.
The rel, media, and hreflang attributes are new in HTML5. The nohref attribute is now obsolete.
- href - The URL that the browser should load when the region is clicked on
- alt - The alternative content. See the corresponding attribute on the img element.
- target - The browsing content in which the URL should be displayed.
- rel - Describes the relationship between the current and target documents.
- media - The media for which the area is valid.
- hreflang - The language of the target document
- type - The MIME type of the target document
shape and coords attributes work together.
The coords attribute depends on the value of the shape attribute.
rect
This value represents a rectangular area.
The coords attribute must consist of four comma-separated integers representing the distance from the following:- The image left edge the to the rectangle left side
- The image top edge to the rectangle top side
- The image left edge to the rectangle right side
- The image top edge to the rectangle bottom side
circle
This value represents a circular area.
The coords attribute must consist of three comma-separated integers representing the following:- The distance from the image left edge to the circle center
- The distance from the image top edge of to the circle center
- The radius of the circle
poly
This value represents a polygon.
The coords attribute must be at least six comma-separated integers, each pair of which represents a point on the polygon.
default
This value is the default area, which covers the rest of the entire image.
No coords value is required when using this value for the shape attribute.
Example
<!DOCTYPE HTML>
<html>
<body>
<p>
<img src="http://www.java2s.com/style/download.png" usemap="#mymap"/>
</p><!-- w w w .j a va 2 s . co m-->
<map name="mymap">
<area href="a.html" shape="rect" coords="3,5,68,62" alt="test a" />
<area href="b.html" shape="rect" coords="70,5,130,62" alt="test b" />
<area href="c.html" shape="default" alt="test c" />
</map>
</body>
</html>
The usemap attribute on the img element associates the map element with the image.