Image cards (IMAGEMAP) or map links provide the ability to turn into a hyperlink of the image. The image is divided into zones, each of which is converted into a separate graphic hyperlink.
To create the image card suit any image that a webmaster must first be broken down into specific areas that may be of three types:
- rect - a rectangular area. The coordinates of the rectangular area defined by two points - Coordinates of the upper left corner coordinate of the lower right corner.
- poly - a polygon. Specifies the coordinates of each point of the polygon.
- circle - a circle. Sets the coordinate of the center of the circle and its radius.
The images create the card in three stages.
In the first stage create the image with the tag IMG
In the second stage creates a map using the tag MAP
Attribute NAME is optional, it specifies a unique name card within the given html-pages. This name uniquely identifies the card. Attribute NAME must begin with a letter, and can contain only letters, digits, and underscores.
After the image is created and the card, it is necessary to link the card to the image using the attribute USEMAP tag IMG
<IMG SRC="map.jpg" USEMAP="#sample_map">
The attribute of the USEMAP indicates the attribute value NAME map links, with the mandatory addition of mark # before the name.
In the third stage webmaster breaks the image into the desired zone using the tag AREA , which has the following syntax:
<AREA [SHAPE="rect|circle|poly"] COORDS="
As the image coordinates are the pixels of the image - 1 unit = 1 pixel. Counting from the upper-left corner of the image - this is the point (0,0).
Attribute SHAPE describes the shape of map area links, the attribute COORDS coordinates assigns a specific area. The number of points in this attribute depends on the form of bands.
- rect - COORDS="<X1>,<Y1>,<X2>,<Y2>"; X1, Y1 - the coordinates of the upper left corner of the zone; X2, Y2 - the coordinates of the lower right corner of the zone;
- circle - COORDS"<X_center>,<Y_center>,
; X_center, Y_center - coordinates of the center circle; R - radius of the circle;
- poly - COORDS="<X1>,<Y1>,<X2>,<Y2>..<Xn>,<Yn>"; Xn, Yn - coordinates corresponding to vertices of the polygon.
If you enter the coordinates of the error occurred, then the browser treats the intersection as part of the zone, which is described first. If the coordinates are outside the borders of the image, they are ignored by the browser.
Attribute HREF indicates the page on which is the zone map references.
Below is a simple map of links with the source code. Image conditionally divided into four rectangular areas.
<img src="img/map.jpg" width="132" height="121" usemap="#australia"> <map name="australia"> <area shape="rect" coords="0,0,68,60" href="1.html" target="_blank"> <area shape="rect" coords="68,0,132,60" href="2.html" target="_blank"> <area shape="rect" coords="0,60,68,120" href="3.html" target="_blank"> <area shape="rect" coords="68,60,132,120" href="4.html" target="_blank"> </map>