The map tag in html examples. Draw an image map with the mouse

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

Rectangular area

Now our map looks like this:

In fact, now the "green" square button has become operational.

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

usemap = "# panel">

I hurried a little with an example without really explaining the essence of what I wrote .. Let's focus on the attributes of the tag .

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

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

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

Take a look at the picture:

So, choosing a rectangular shape shape = "rect" for our area in the form of a square button, we specified 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", we have it represented in the form of a triangle. In order to select its "working" area from our drawing, we assign to the attribute shape meaning poly- a polygon, which will define this area as a kind of polygon, where the coordinates separated by commas will be its vertices, there can be any number of them "X1, Y1, X2, Y2, X3, Y3, X4, Y4 ... X124, Y124" the figure formed by these points with vertices of corners can have the form of any polygon, both regular and irregular. In our case, there are only three angles, that's why it is a triangle, therefore its coordinates will be set 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" we have it is round .. so the shape of the area will be round shape = "circle"... This time with coordinates, things are a little different. We 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's a drawing:

Here's an example:

We bring it to mind ..

Now a little about what else it would be desirable to do with our map before "mounting" it to any page.

Define the fixed dimensions of the map drawing by attributes width and height

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

Let's get rid of the border frame .. let's do border = "0".. (well, if you like the border more, you can not do it .. I do not insist ..)

In the end, it should look something like this:

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

Crossing areas

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

Suppose our next button looks like this:

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

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

And in the code, specify the path to the same document:

"Not an area"

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

What about the hole in it?

Tag besides the attribute href has the opposite attribute 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 crossing areas, the area that is inside the tag in the code will have the highest priority. listed first

Therefore, the example will look like this:

The map is on the server.

Unclear? Then we read ..

With attribute usemap we seem to have figured it out .. Look, the user (client), having opened your page, simultaneously with all the rest of the content, loads "on his side" both the picture itself and the navigation map to 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 posted or are going to publish your site (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 with the coordinates of the point received from the client's browser.

It is written like this:

Isn't it clear anyway? If yes, then don't bother about it .. use usemap, in my opinion, such a solution will be the best in most cases when using navigation maps.

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

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



It is possible, but not necessary .. because when loading the page, problems may arise, since the map with markup has already been loaded, but the picture itself is not yet present ..

And as for loading ..



In this part of the code, there can be anything long text, tables, graphics .. but still it is better not to write anything here

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

Hi. Recently I happened to deal with such a specific html feature as an image map. To be honest, I didn't often use it, and then, usually, everything was done with rectangular zones. But this was not the case. The task was to post links to individual regions of the image, which was the map of the country, and, unfortunately, there was no question of any canvases or svg. Only html only hardcore! So, the task is set, Google is activated, and you can start.

Theory

• coords- coordinates of the selection area
• href- the link to which the transition will be made when clicking on the zone
• nohref- indicates that the zone contains no links
• shape- form of selection
  • 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- defines where the link will open

Since the selection area I had to be polygonal, the value of the shape attribute, area tag, we specify as poly - a polygonal area. In this mode, comma-separated coordinates of the point relative to the upper left corner - x, y. Periods are also separated by commas, which is confusing at first when reading such code.

Writing 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. In the process of writing, I used my combat library, so do not be surprised at non-standard functions. First, let's hang up the mousedown event on #canvas, in which the 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 into a class, some helper functions, that's all. I hope sowing tools will be useful to someone.

Meaning and application

• _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 full browser window

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

6. Attribute nohref - makes the area inactive. Used when overlapping objects. It is rarely used, but sometimes it can be an indispensable solution. For example, you can make a small circle within a large circle inactive.

The nohref area must go first.

Sample code:

The use of a map of links in the image takes place only in a narrow range of tasks. For example, when creating some kind of scheme or driving map. In other cases, using a map to create menus and other graphic elements looks unreasonable.

HTML images are added to web pages using a tag ... The use of graphics makes web pages more visually appealing. Images help to better convey the essence and content of a web document.

Using HTML tags

Inserting images into an HTML document

1. Tag

Element represents the image and its fallback content, which is added using the alt attribute. Since the element is inline, it is recommended to place it inside a block element, for example,

Or