How to make an html image map. Creating links in image areas: map of links. Client version of the image map

• _blank - opens the page in a new window
• _self - loads the page into the current window
• _parent - loads the page into the parent frame
• _top - cancels all frames and loads the page in the full browser window

5. Attribute title="hint" - выводит всплывающую подсказку. можно также сделать более красивую всплывающую подсказку: как сделать красивую всплывающую подсказку для ссылки »!}

6. Nohref attribute - makes the area inactive. Used when overlapping objects. It is used quite rarely, but sometimes it can become an indispensable solution. For example, you can make a small circle inside a large circle inactive.

The nohref area must come first.

Sample code:

The use of a link map in an image occurs only in a narrow range of tasks. For example, when creating some kind of diagram or travel map. In other cases, the use of a map when creating menus and other graphic elements seems unreasonable.

In an html document.

Now let's find out what an image map is.
With an image map, you can make it so that when you click on different areas of the same image, you are taken to different pages. An image map is also called a navigation map by some.
I understand that this is difficult to understand in words, so I suggest looking at an example of what an image map looks like in real life.
Just pay attention: the picture is the same, but the areas and transition path are different.

Don't be afraid, it's not difficult at all. The most important thing is to understand the theory and consolidate it with practice.

Well, let's get down to theory.

Image maps (navigation maps) are specified by the tag .
Tag - this is a box inside which tags are placed .
Tag is intended to define a geometric region with a reference attached to each region.

Area attributes

1. shape attribute
shape – defines the shape of the area ( rectangle, circle, polygon).
Rectangle - "rect". Example: shape=" rect";
circle - "circle". Example: shape=" circle";
polygon - "poly". Example: shape=" poly"

2. coords attribute
coords is the arrangement of a geometric shape.

Let's look at an example using the geometric shape of a rectangle.

You already know that if you need a rectangle shape, then you need to set the value in the shape attribute « rect ».

The reference point starts from the upper left corner of the picture, the coordinates of which are (0;0)

This means that you need to specify the coordinates of the work area of ​​the rectangle, the upper-left and lower-right corners.

For the example with rectangle No. 1, take the following coordinates:

x1=25, y1=36, x2=114, y2=98

This is what the code will look like:

So far so good. But now we need to associate the picture with the map.
To do this, come up with any name for the map, for example, “karta1" and write it in the tag

Now let's connect the card with the picture. To do this, we use the usemap attribute.
Writing example:
usemap=" #map_name"

In our case it will look like this:

Now let's put everything together and write down the coordinates for another rectangle No. 2 with the same data (x1=153, y1=11, x2=219, y2=127).

Now look at the result. Click on rectangle #1 and on rectangle #2

First you need to specify the area type. To do this, set the value “circle” in the shape attribute.

Now let's move on to the coordinates.
To create coordinates for a circular area, you need to enter data to the center (xy) and specify the length of the radius (R).
The order of recording coordinates for the coords attribute will be as follows:

For circle No. 1, take the following coordinates:

x=46, y=48; and the radius length is R=35

Now let's put everything together and write down the coordinates for circle No. 2 with the following data x=158, y=75, R=53.

Now look at the result. Click on circle #1 and circle #2:

The polygonal area is the most complex area in the navigation map.

First you need to specify the area type. To do this, set the value “poly” in the shape attribute

Now let's move on to the coordinates.

The order of recording coordinates for the coords attribute will be as follows:

Explanation:
x1 ,y1 - coordinates of the first corner;
x2 ,y2 - coordinates of the second corner;
xN,yN - last corner coordinates

That is, for polygon No. 2 it looks like this:

Now let’s give the map a name and link the map to the picture:

Now let's put everything together and write down the coordinates for hexagon No. 1 with the following data: x1=54, y1=20, x2=109, y2=20, x3=147, y3=58, x4=109, y4=96, x5= 54, y5=96, x6=16, y6=58.

Now look at the result. Click on polygon #1 and on polygon #2:

Possibility of combination

There are cases when you need to use different areas at the same time in one picture, for example, a circle and a rectangle:

Addition using TITLE

For each area, you can add tooltips using the title attribute.

Now look at the result. Hover your mouse over the circle and then over the rectangle:

That's all. We figured out the image map in HTML (navigation map).

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:

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

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 on 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.

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:

Still not clear? If yes, then don’t bother about it.. use usemap, in my opinion, this solution will be the best in most cases when using navigation maps.

To easily determine the coordinates of a particular point on your navigation map, open the drawing with a graphic editor like Paint, for example... there, when you move the pointer over the drawing, you will see two changing numbers, these are the X and Y pixel coordinates in this drawing . In Paint, this panel is located at the bottom of the screen.

When creating a page with a navigation map, the tag must always be higher than the card itself That is, write like this:



You can, but it’s not necessary.. because problems may arise when loading the page, since the map with the markings has already loaded, but the drawing itself has not yet..

And as for loading...



This place in the code can contain anything long text, tables, graphics... but it’s still better not to write anything here

And write here, because while the page is loading, the user, without waiting for it to finish, may try to click on the buttons indicated in the navigation map, which by this time has not yet loaded..