How to make an html image map. Draw an image map with the mouse. Addition using TITLE

Hello. Recently I had the opportunity to deal with such a specific html feature as an image map. To be honest, I haven’t had the opportunity to use it often, and then, usually, everything was done in rectangular-shaped zones. But this was not the same case. The task was to post links to individual regions of the image, which was a map of the country, and, unfortunately, there was no question of any canvases or svg. Only html only hardcore! So, the task has been set, Google is activated, and we can begin.

Theory

• coords- coordinates of the selection area
• href- link to which you will go when you click on the zone
• nohref- indicates that the zone does not contain a link
• shape- selection form
  • circle- selection area in the form of a circle
  • default- selects the entire image area
  • poly- selection area in the form of a polygon
  • rect- selection area in the form of a rectangle
• target- determines where the link will open

Since my selection area had to be polygonal, we specify the value of the shape attribute, area tag, as poly - polygonal area. In this mode, the coordinates of the point relative to the upper left corner are indicated, separated by commas - x,y. The periods are also separated by commas, which at first causes confusion when reading such code.

We write Paint

First, let's prepare the layout:

Body ( margin: 0; padding: 20px; font-family: Arial, Helvetica, sans-serif; ) img ( border: none; outline: none; display: block; -moz-user-select: none; -webkit-user -select: none; user-select: none; ) .canvas ( border: 2px solid #333; padding: 2px; margin-bottom: 16px; display: inline-block; //display: inline; //zoom:1; ) .canvas.draw ( border-color: #3C0; ) .canvas .inner ( position: relative; ) .canvas .point ( width: 1px; height: 1px; background-color: #fff; border: 1px solid #000 ; overflow: hidden; position: absolute; ) .bar ( margin-bottom: 16px; ) .info ( background-color: #FCFCFC; border: 1px dotted #CCC; font-size: 12px; font-style: italic; padding : 8px; word-wrap: break-word; )
In javascript, everything is quite simple. During the writing process, I used my own combat library, so don’t be surprised by non-standard functions. First, let’s attach a mousedown event to #canvas, in which a point on the image will be rendered and its coordinates will be recorded.

Var addPoint = function(e)( var e = _.getEvent(e), offset = _.getOffset(nodes["canvas"]), x = e.clientX + _.getDocScrollLeft() - offset, y = e. clientY + _.getDocScrollTop() - offset, node = nodes["canvas"].appendChild(_.node("div", ("class":"point"))); node.style.top = y-1 +"px"; node.style.left = x-1+"px"; points.push(("x" : x, "y" : y, "node" : node)); e.preventDefault && e. preventDefault(); return false; );
Then we will write a function that will generate the html code of our map.

Var renderInfo = function())( var text; _.clearNode(nodes["info"]); nodes["info"].appendChild(_.node("span", " ")); };
Let's frame everything in a class, a few helper functions, that's all. I hope this tool will be useful to someone.

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

Let's look at an example of what an image map looks like in html:

When you hover your mouse over the area of ​​the green rectangle, you can see that it is a link to “#green_link” (the label was chosen as an example; you can make a link to any page on the Internet). The red square has "#red_link", and the blue circle has the corresponding "#blue_link".

Code for this example:

img/primer-kartu-izobrazheniy-1.jpg">

As you can see from the example, the code is not that complicated. Let's look at the tags to create an image link map.

1. You need to create an image link and maps

When creating a link map, the usemap attribute is required for the img tag.

2. Description of the map

3. Each map element is described using a tag , which specifies the type of object using the shape attribute (rectangle, circle, or polygon) and its coordinates.

Areas may overlap each other. In this case, the link will lead to the object that was described last.

Tag attributes

1. Shape="object_type" attribute - specifies the object type. Can take the following values:

• circle - circle;
• rect - rectangle;
• poly - polygon;

2. Attribute coords="coordinate_values"- determines the geometric location of the object and its dimensions.

The reporting point of the image is the upper left corner. Those. if you specified a height offset of 10, then this means 10 pixels down.

Depending on the type of object, you need to specify coordinate values ​​in different formats. All values ​​are indicated in pixels (there is no need to write the px mark).

• For the circle type: coords = (x,y,r) , where x,y are the coordinates of the center of the circle, and r is the radius of the circle;
• For the rect type: coords = (x1,y1,x2,y2) , where x1,y1 are the coordinates of the upper left point of the rectangle, x2,y2 are the coordinates of the lower right point of the rectangle;
• For poly type: coords = (x1,y1,x2,y2,...,xn,yn), the x,y coordinates of each point of the polygon are sequentially indicated;

3. Attribute href="referral_address"- sets the link to go to (similarly). In addition to the jump address, you can use JavaScript functions to perform some action.

• _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.