<img src="" usemap="#"><map name=""><area>
| Browser |
|
|---|
The MAP element defines a client-side image map, and the AREA element is used to define an area inside the image map.
<img src="image/map.gif" alt="Example" usemap="#maptest">
<map name="maptest">
<area shape="rect" coords="22,11,122,62" href="map1.html" alt="Blue">
<area shape="circle" coords="184,86,30" href="map2.html" alt="Pink">
<area shape="poly" coords="87,78,30,110,81,139,69,113" href="map3.html" alt="Yellow">
</map>
The IMG element
<img src="image/map.gif" alt="Example" usemap="#maptest">
| Attribute | Value | Explanation |
|---|---|---|
| src=" " | URL | the URL of the image to display |
| alt=" " | text | alternate text (short description) |
| usemap=" " | #map name | a number sign (#) and the map name (arbitrary name) |
- The alt attribute must be specified for the IMG element.
The MAP element
<map name="maptest"></map>
| Attribute | Value | Explanation |
|---|---|---|
| name=" " | map name | the name defined by the usemap attribute |
The AREA element
<area shape="rect" coords="22,11,122,62" href="map1.html" alt="Blue">
| Attribute | Value | Explanation |
|---|---|---|
| shape=" " | the shape of the hot spot | |
| rect | rectangle | |
| circle | circle | |
| poly | polygon | |
| coords=" " | the coordinates of the hot spot | |
| pixels | for rect : the top-left and bottom-right coordinates | |
| pixels | for circle : the center coordinate and radius size | |
| pixels | for poly : the coordinates of all corners | |
| href=" " | URL | the target URL of the link |
| alt=" " | text | alternate text (short description) |
- The alt attribute must be specified for the AREA element.
- The target attribute can be used with the AREA element.
<area shape="rect" coords="22,11,122,62" href="map1.html" alt="Blue" target="_blank">
Specifying coordinates
- rect (rectangle) : The top-left and bottom-right coordinates.
- coords="22,11,122,62"
- circle : The center coordinate and radius size.
- coords="184,86,30"
- poly (polygon) : The coordinates of all corners.
- coords="87,78,30,110,81,139,69,113"
Coordinates calculating
Example that uses "Windows Paint".
Example
<p><img src="image/map.gif" alt="Example" border="0" width="221" height="145" usemap="#test"></p>
<map name="test">
<area shape="rect" coords="22,11,122,62" href="map1.html" alt="Blue">
<area shape="circle" coords="184,86,30" href="map2.html" alt="Pink">
<area shape="poly" coords="87,78,30,110,81,139,69,113" href="map3.html" alt="Yellow">
</map>
- Output
-