Image maps
Image maps allow you to link links to different areas of a single image. It is implemented in two different versions - server and client. In the case of a server variant, the browser sends a request to the server to obtain the address of the selected link and waits for a response with the requested information. This approach requires additional time to wait for the result and separate files for each image card.
In the client version, the map is located in the same HTML document as the image link.
Client version of the map-image
To indicate that the image is a map, use the usemap parameter of the <IMG> tag. The value is a reference to the configuration description of the map.
Fig. 1. Bookmarks are links created with a map
To make references to the tabs shown in Fig. 1, the following code should be used (example 1).
Example 1. Using an Image Map
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text / html; charset = windows-1251">
<Title> Map-image </ title>
</ Head>
<Body>
<P> <img src = "map.gif" width = "411" height = "46" usemap = "# map" alt = "Navigation"> </ p>
<P> <map name = "map">
<Area shape = "poly" alt = "Bookmark 2" coords = "210.27, 203.9, 202.6, 197.2, 192.1, 120.1, 115.2, 110.6, 112, 9, 119.27, 119.32, 211.32, 210.27 "href =" 2.html ">
<Area shape = "poly" alt = "Bookmark 3" coords = "302.27, 295.9, 293.6, 289.2, 283.1, 212.1, 206.2, 202.6, 203, 9, 210.27, 211.32, 284.32, 303.32, 302.27 "href =" 3.html ">
<Area shape = "poly" alt = "Bookmark 4" coords = "302.27, 303.32, 394.32, 393.27, 386.9, 382.3, 375.1, 303.1, 298, 2, 293.6, 295.9, 302.27 "href =" 4.html ">
</ Map> </ p>
</ Body>
</ Html>
To specify to the browser that the image is a map, use the usemap parameter . It is a reference to the description of the map configuration, which is specified by the <MAP> tag. The value of the name parameter of this tag must match the name in usemap . To assign an asset to a field that is a link to an HTML document, use the <AREA> tag.
Parameters of the AREA tag
SHAPE
Defines the shape of the active area. The shape can be in the form of a circle , rectangle ( rect ), polygon ( poly ).
ALT
Adds alternate text for each area. It serves as only a comment for the link, since it is never displayed on the screen.
COORDS
Specifies the coordinates of the active area. Coordinates are counted in pixels from the upper-left corner of the image, which corresponds to a value of 0.0. The first number is the horizontal coordinate, the second number is the vertical coordinate. The list of coordinates depends on the shape of the region.
For a circle, three numbers are given - the coordinates of the center of the circle and the radius.
For a rectangle, the coordinates of the upper left and lower right corners.
For the polygon, the coordinates of its vertices are given (Figure 2).
Fig. 2. Coordinate points for the polygon
HREF
Specifies the address of the reference for the scope. The rules for writing are the same as for the <A> tag.
Image maps allow you to create links to different areas of the same image. The use of this approach is clearer than usual text links and allows you to apply just one graphic file for organizing links. However, do not assume that the image maps should be included wherever graphical references are required. First of all, you should evaluate all the pros and cons, as well as view alternatives.
Advantages of card-images
1. Maps allow you to specify any shape of the reference area. Given that the images are rectangular in nature, it is not possible to make a graphical link of complex shape, for example, to indicate a geographical region, without map-images. As a rule, in geographic subjects, image maps are used most often.
2. It is more convenient to work with one file - you do not have to worry about splicing individual fragments and the drawing can be easily placed in the right place.
disadvantages
1. You can not set a tooltip and alternative text for individual areas. Alternate text allows you to get text information about the image when the download of images is disabled in the browser. Since images are downloaded after the browser receives information about it, the text replacing the picture appears earlier. And already as you load the text will be replaced by the image. For map images, this feature is relevant, because if you turn off viewing images, which many users do, then in the end we will see only one empty rectangle.
2. With a complex form of the link area, the amount of HTML code increases. The contour is approximated by a set of straight lines, for each point of such a segment two coordinates must be specified, and the total number of such points can be sufficiently large. For the sake of justice, it should be noted that complex forms are a special case and rarely used.
3. With the image maps, you can not make different effects that are available when cutting one picture into fragments: the rolling effect, partial animation, individual optimization of the images for their quick loading.
Usability
From the position of user convenience, image maps have only one advantage - links of a diverse form. This adds clarity to the presentation of information - we are not limited to a rectangular link form and can use complex configuration links for our purposes. In all other respects, there is no use from them - the usual text links are more informative and they are not afraid of disabling the display of images in the browser. The fact that one image is loaded faster than the same picture, but cut into fragments and saved as a set of graphic files, easily dispenses. Each of these output files can be reduced using individual optimization settings. As a result, the total volume of all fragments will take up less space than one image. Do not discount the psychological factor - it seems to a person that a set of small pictures loads faster than one big one.
The main drawback of the maps is that there are no clearly delineated links. Therefore, these boundaries must be allocated by different means already on the image. If the drawing does not load for any reason, then it becomes very problematic to understand the set of links.
Alternative options
There is not always an urgent need to use image maps, so you should pay attention to the fact that there are other possible options for accomplishing the task.
Using FLash
In flash-movies you can create different areas of links, using the capabilities of vector graphics. Thanks to its wide capabilities, Flash can create stunning menus and navigation aids. But here too, care must be taken not to lose the trees behind the trees.
Cutting Images
This is one of the popular tools in design. One image in this case is cut using special programs into fragments, which finally come together, creating the illusion of a solid picture. Although the cutting areas can only be rectangular, in most cases this is enough to create links. For each fragment, you can select the most appropriate graphic format in which it will be saved, optimization parameters, add alternative text. Then, even if images are disabled, the borders of the regions and the text that replaces the image will be clearly visible.
Summary
As it turned out, the reason for using image maps is only one - a complex form of links dictated by design tasks. A typical application is geographic map regions that serve as references. In all other cases, you can get by with test references, and if you need to create graphical navigation, one image can be cut into fragments for convenience. This approach will create more convenience for users, especially those that for various reasons disable the display of images in the browser. They also need to be remembered.
Copyright © www.htmlbook.ru
Comments
Commenting on, remember that the content and tone of your message can hurt the feelings of real people, show respect and tolerance to your interlocutors even if you do not share their opinion, your behavior in the conditions of freedom of expression and anonymity provided by the Internet, changes Not only virtual, but also the real world. All comments are hidden from the index, spam is controlled.