Navigation maps. Creating links in image areas: map of links Graphic maps html

Tag

Inside the container

• one or more elements< >. These elements have no content but define the geometric regions of the image map and the hyperlinks associated with each region
• block level content. This content should include< >, which specify the geometric regions of the map and the links associated with each region

If tag

If regions overlap, the element defining the region that appears earlier in the document takes precedence.

HTML: 3.2 | 4 / XHTML: 1.0 | 1.1

Syntax

Attributes

class	defines the name of the class to use
dir	determines the direction of the characters: ltr - left to right rtl - from right to left
id	unique identificator
lang	defines the language of the displayed document
name	name of the image card. Used as the value of the tag's usemap parameter
onblur	element loses focus
onclick	click on an element
ondblclick	double click on an element
onfocus	element getting focus
onkeydown	pressing a key when the element has focus
onkeypress	pressing and releasing a key when an element has focus
onkeyup	releasing a previously pressed key when the element has focus
onmousedown	clicking a mouse button when an element has focus
onmousemove	mouse pointer movement when an element has focus
onmouseout	moving the mouse pointer off an element
onmouseover	placing the mouse pointer on an element
onmouseup	releasing a previously pressed mouse button when an element has focus
style	specifies an inline style sheet
title	tooltip

Example

• closing tag is required ()
• id attribute is required
• It is recommended to provide a text alternative to a graphics card for cases where graphics are not available or the user cannot obtain them
• It is not recommended to use the image map as the main navigation, due to poor support in older and voice browsers

Tag — block level element, i.e. The content of the tag always starts on a new line. A line break is also added after the tag.

Vlad Merzhevich

Image maps allow you to link links to different areas of the same image. It is implemented in two different versions - server and client. When using the server option, the browser sends a request to the server to obtain the address of the selected link and waits for a response with the required information. This approach requires additional time to wait for the result and separate files for each image map.

In the client version, the map is located in the same HTML document as the link to the image.

Client version of the image map

To indicate that an image is a map, use the tag's usemap attribute . The value is a link to a description of the card configuration.

Example 1: Using an image map

The usemap attribute is used to indicate to the browser that the image is a map. It is a link to a description of the card configuration, which is specified by the tag

AREA tag attributes

shape

Defines the shape of the active area. The shape can be in the form of a circle (circle), rectangle (rect), polygon (poly).

alt

Adds alternative text for each area. Serves only as a comment for the link, as it is not displayed on the screen.

coords

Sets the coordinates of the active area. Coordinates are measured in pixels from the upper left corner of the image, which corresponds to the value 0.0. The first number is the horizontal coordinate, the second is the vertical coordinate. The list of coordinates depends on the shape of the area.

For a circle, three numbers are specified - 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 a polygon, the coordinates of its vertices are specified (Fig. 2).

Rice. 2. Coordinate points for the polygon

href

Image maps allow you to create links to different areas of the same image. Using this approach is clearer than regular text links and allows you to use just one graphic file to organize links. However, you should not assume that image maps should be included wherever graphical references are required. First of all, you should evaluate all the pros and cons, and also look at alternative options.

Benefits of image maps

1. Maps allow you to set any shape of the link area. Given that images are rectangular in nature, it is not possible to make a graphical link of a complex shape, for example to indicate a geographic area, without image maps. As a rule, in geographic subjects, image maps are used most often.

2. It’s more convenient to work with one file - you don’t have to worry about joining individual fragments and the drawing can be easily placed in the right place.

Flaws

1. You cannot set tooltip and alt text for individual areas. Alternative text allows you to get text information about a picture when loading images is disabled in the browser. Because images are loaded after the browser receives information about them, the image's replacement text appears earlier. And as it loads, the text will be replaced by an image. For image maps, this feature is relevant, because if you turn off image viewing, which many users do, you will end up seeing only one empty rectangle.

2. With a complex shape of the link area, the amount of HTML code increases. The contour is approximated by a set of straight segments; for each point of such a segment, two coordinates should be specified, and the total number of such points can be quite large. In fairness, it should be noted that complex forms are a special case and are used quite rarely.

3. With image cards you cannot create various effects that are available when cutting one picture into fragments: rolling effect, partial animation, individual optimization of pictures for their fast loading.

Usability

From the point of view of user convenience, image maps have only one advantage - links of various shapes. This adds clarity to the presentation of information - we are not limited to the rectangular shape of the link and can use links of complex configuration for our own purposes. In all other respects, they are of no use - regular text links are more informative and they are not afraid of turning off the display of images in the browser. The fact that one image loads faster than the same picture cut into fragments and saved as a set of graphic files is easily circumvented. Each of these final 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. One should not discount the psychological factor - it seems to a person that a set of small pictures loads faster than one large one.

The main drawback of the maps is that there are no clearly defined boundaries of the links. Therefore, these boundaries have to be highlighted using different means already in the image. If the picture does not load for some reason, then understanding the set of links becomes very problematic.

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 completing the task.

Using Flash

In Flash videos, you can create different link areas using vector graphics. Thanks to its extensive capabilities, you can create stunning menus and navigation in Flash. But here, too, caution is required so as not to lose the forest for the trees.

Image slicing

This is one of the popular means in design. In this case, one image is cut using special programs into fragments, which are finally brought together, creating the illusion of a whole picture. Although the cutting areas can only be rectangular, in most cases this is sufficient for creating links. For each fragment, you can select the most suitable graphic format in which it will be saved, optimization parameters, and add alternative text. Then, even with the display of images disabled, the boundaries of the areas and the text replacing the image will be clearly visible.

Summary

As it turned out, there is only one reason to use image maps - a complex form of links dictated by design tasks. A typical application is regions of a geographic map that serve as references. In all other cases, you can get by with text links, and if you need to create graphic navigation, one image can be cut into fragments for convenience. This approach will create more convenience for users, especially those who, for various reasons, disable the display of images in the browser. You need to remember them too.

Image Map allows you to attach links to image fragments. By clicking on individual parts of the image, the user can follow one or another link to different Web pages.

The image map is defined by a paired tag . An HTML document can contain multiple image maps, so each map must be given a unique name, which is determined by the attribute name.

An image map consists of image regions and their corresponding links. Describes a section of the image and assigns a single tag to it as a link .

Tag attributes

By default, coordinates are measured in pixels.

The coordinate origin is the upper left corner of the screen, i.e.

Examples of different shapes of image map areas

If two described areas overlap each other, then the link belonging to the first one is used. This feature can be used in a situation where the user clicks on a point that does not belong to any of the map areas, by defining the last map area as a rectangle with the width and height of the entire image.

To use an image as a map in a tag you need to enter an additional attribute usemap, which specifies the name of the image map. This name is preceded by a "#" sign.

Example of using Image Map

When you click on different areas of a given image, the color of the corresponding text changes.

We have already talked about how to make a drawing a link... in this chapter we will talk about how to make a fragment, an area of ​​a drawing, a link to a particular document, as well as how to make different areas of the same drawing links to different documents .

To accomplish this task, we cannot do without so-called navigation maps.

Let's say we have a picture like this:

And we need to do it so that the user, by clicking on one of these “buttons,” follows a link to this or that document.. what do we need for this?

First of all, let’s designate our drawing not as an ordinary graphic image, but as a navigation map, giving this drawing our own individual name. This is done using the attribute usemap tag (I think you don’t need to be reminded that the tag has a required attribute src which indicates the path to a particular picture )

Let's name our drawing/map panel. It will look like this:

usemap="#panel">

Do not forget to put the sign according to the rules of syntax # hash marks in front of the name..

Well, now, let’s actually create a navigation map. It is specified by the tag which has an attribute name- name.. do you see where I’m going with this? Well, as you probably already guessed, we will indicate on the basis of which drawing we will build our navigation map by indicating its name..

Now let’s start by indicating to the browser the areas of the picture that will serve as links, and at the same time we’ll write down the transition paths for these links. This task is taken over by the tag , it does not require a closing tag, and has the following attributes that we will work with:

)
shape- the shape of the drawing area that will serve as a reference. Can have one of three meanings:

• rect- rectangular area
• poly- the area is a kind of polygon
• circle- area defined by a circle

coords- shape coordinates

Rectangular area

Now our map looks like this:

In fact, now the “green” square button has become working.

As you can see by clicking on it in this example:

usemap="#panel">

I was a little hasty with the example without really explaining the essence of what was written... Let’s focus on the tag attributes .

href="primer1.html"- here I think it’s clear, this is the path to the document that should open when you click on the “green button”.

Since our button is square, and a square, as we know, is a “regular” rectangle, we assign the shape of the drawing area to rectangular shape="rect" .

And now the fun part coords="15,15,82,82"- coordinates.. For a rectangle, they are specified by two points according to the principle “X1, Y1, X2, Y2” Where X1, Y1 is the first point and, accordingly, X2, Y2 the second. Coordinates are indicated in pixels. Our drawing/map has dimensions of 300 by 100 pixels, its uppermost left pixel has coordinates X=0,Y=0, and the lowest right pixel X=300,Y=100. If it’s not clear, let’s dive into fifth grade geometry..

Take a look at the picture:

So, choosing a rectangular shape shape="rect" For our area in the form of a square button, we indicated the coordinates of its upper left and lower right pixels... which are quite enough to designate the “working” area of ​​the entire button.

Polygon (polygon).

Let's deal with the “yellow button”, it is represented in the form of a triangle. In order to select its “working” area from our drawing, we assign the attribute shape meaning poly- a polygon that will define this area as a kind of polygon, where the coordinates separated by commas will be its vertices, there can be as many of them as you like “X1,U1,X2,U2,X3,U3,X4,U4... X124,U124” the figure formed by these the points and vertices of the corners can look like any polygon, both regular and irregular. In our case, there are only three angles, that’s why it’s a triangle, therefore its coordinates will be given by three pairs of values ​​“X1,Y1,X2,Y2,X3,Y3”

So we write everything together like this:

shape="poly" coords="148,15,185,82,110,82">

And here is a picture that clearly shows where the coordinates of the points come from..

Circle

Well, the last “red button” is round... which means the shape of the area will be round shape="circle". This time the situation with coordinates is a little different. We will need three values ​​X, Y, R. X and Y are the coordinates of the center of our circle, and R is the length of the radius in pixels.

Here is the drawing:

Here's an example:

Let's bring it to mind..

Now a little about what else it would be advisable to do with our map before “mounting” it into any page.

Let us define the fixed dimensions of the picture-map with attributes width And height

Let's write alternative text both for the entire map image and for its individual areas using the attribute alt, as well as a description of elements with the attribute title .

Let's get rid of the border frame... let's do it border="0"..(well, if you like it better with a border, you don’t have to do it.. I don’t insist..)

In the end it should look something like this:

width="300" height="100" border="0" alt="Control Panel" title="Control Panel"> !}

Intersection of regions

Sometimes it is convenient to form the “working” area of ​​an image by “mixing” different shapes.

Let's say our next button looks like this:

Of course, you can define the shape as a polygon, but you will have to specify a lot of coordinates for the round part of such a button (well, if you need special accuracy in the navigation map).

In this example, you can define two rectangle shapes rect and circle circle as it shown on the picture:

And in the code indicate the path to the same document:

"Not an area"

Let's look at an example... suppose you need to make a button like this:

What about the hole in it?

Tag besides the attribute href has an attribute opposite in value nohref- an inactive area, that is, if the user clicks on such an area, then absolutely nothing will happen, which is what we actually need to achieve when making a “hole” in our map.

The map will be defined by two areas, an inactive circle circle and active rectangular area rect and as shown in the drawing, have the following coordinates:

As mentioned earlier, when areas intersect, the highest priority will be given to the area that is inside the tag in the code listed first

Therefore, the example will look like this:

Map on the server.

Excerpt from directory (tag attributes ):

usemap- the image is a client-side navigation map.
ismap- the image is a navigation map on the server.

Unclear? Then let's read...

With attribute usemap We seem to have figured it out.. Look, the user (client), having opened your page, simultaneously with all the other content, loads “on his side” both the drawing itself and the navigation map for it, and the whole thing is processed by his browser.

And here is the attribute ismap tag tells the browser that there is a navigation map for this image on the server, well, where you have posted or are going to post your website (read the article:). And now, when a visitor (client) clicks on any area of ​​the picture with such an attribute, the browser will remember the coordinates of this click and send them to the server, where a special program will process this data and redirect the user to the address indicated in the map on the server, in accordance with the coordinates of the point received from the client browser.

It is written like this:

Where address of the navigation map on any website.. hosted on one server or another..

The element's name attribute

Tag attributes we indicate both the coordinates of the area (coords attribute) and the type of shape we need (shape attribute):

Usage example

Let's look at an example in which when you click on a certain shape in one picture, you go to different web pages that describe these shapes (links to Wikipedia):

Choose a figure:

"4 shapes available for selection" >

And so in order, what we did in this example:

• Posted an image (tag ), which we will later use when creating an image map. In the usemap attribute, you must specify the name of the map image that we will use in the element
• Place the map image (tag
• Place four tags , which define interactive areas in the map image:
  • First we ask rectangular area(shape attribute with value "rect"), it corresponds to our first image ( first two the values ​​correspond to the upper left corner, the following two values ​​determine the upper and lower right corner).
  • Second indicate round area(shape attribute with value "circle"), it corresponds to our second image ( first the value corresponds to the axis coordinates x, and the second along the axis y, the third determines radius).
  • Concerning thirds And fourth figure, then they are compiled according to the principle polygonal area(shape attribute with value "poly"). You determine the required number of points in the image, calculate the coordinates of these points (graphical editor) and indicate them in such an order that the browser can connect them with one line. Using a triangle as an example (third picture): first point (coordinates x And y vertices), second point (coordinates x And y lower left corner) and third point (coordinates x And y lower right corner).

I draw your attention to the fact that if the tag has Practical task No. 26.

Nuance: for the purity of the practical task, I suggest using the top of the star as the first point and moving clockwise. I specified as the value of the href attribute # in this case it acts as a placeholder (you stay on the same page), you can make a transition to any page.