Why are image maps needed? Navigation maps. Example of using Image Map

.

Tag has a required src attribute, the value of which is the absolute or relative path to the image:

For tag The following attributes are available:

Table 1. Tag attributes

Attribute	Description, accepted value
alt	The alt attribute adds alternative text to an image. Displayed where the image appears before it is loaded or when graphics are disabled, and is also displayed as a tooltip when hovering the mouse over the image. Syntax: alt="image description" . !}
crossorigin	The crossorigin attribute allows you to load images from resources on another domain using CORS requests. Images loaded into canvas using CORS requests can be reused. Allowed values: anonymous - Cross-origin request is made using an HTTP header, and no credentials are transmitted. If the server does not provide credentials to the server from which the content is requested, the image will be corrupted and its use will be limited. use-credentials — Cross-origin request is performed by passing credentials. Syntax: crossorigin="anonymous" .
height	The height attribute specifies the height of the image in px. Syntax: height="300" .
ismap	The ismap attribute indicates that the picture is part of a map image located on the server (a map image is an image with clickable areas). When you click on a map image, the coordinates are sent to the server as a URL query string. The ismap attribute is only allowed if the element is a descendant of the element with a valid href attribute. Syntax: ismap.
longdesc	An extended image description URL that complements the alt attribute. Syntax: longdesc="http://www.example.com/description.txt" .
src	The src attribute specifies the path to the image. Syntax: src="flower.jpg" .
sizes	Sets the image size depending on the display options. Only works when the srcset attribute is specified. The attribute value is one or more strings, separated by commas.
srcset	Creates a list of image sources that will be selected based on screen resolution. Can be used together with or instead of the src attribute. The attribute value is one or more strings, separated by commas.
usemap	The usemap attribute specifies the image as an image map. The value must begin with the # symbol. The value is associated with the value of the tag's name or id attribute
width	The width attribute specifies the width of the image in px. Syntax: width="500" .

1.1. Image address

The image address can be specified in full (absolute URL), for example:
url(http://anysite.ru/images/anyphoto.png)

Or via a relative path from document or root directory website:
url(../images/anyphoto.png) - relative path from the document,
url(/images/anyphoto.png) - relative path from the root directory.

This is interpreted as follows:
../ - means to go up one level, to root directory,
images/ - go to the folder with images,
anyphoto.png - points to an image file.

1.2. Image Dimensions

Without setting the image dimensions, the drawing is displayed on the page in its actual size. You can edit the dimensions of the image using the width and height attributes. If only one of the attributes is specified, the second will be calculated automatically to maintain the proportions of the picture.

1.3. Graphic file formats

JPEG format (Joint Photographic Experts Group). JPEG images Ideal for photographs, they can contain millions of different colors. Images compress better than GIFs, but text and large areas of solid color may become splotchy.

GIF format (Graphics Interchange Format). Ideal for compressing images that have areas of solid color, such as logos. GIFs allow you to set one of the colors to be transparent, allowing the background of a web page to show through part of the image. GIF files may also include simple animation. GIF images contain only 256 shades, which makes the images look blotchy and unrealistic in color, like posters.

PNG format (Portable Network Graphics). Includes the best features of GIF and JPEG formats. Contains 256 colors and makes it possible to make one of the colors transparent, while compressing images into a smaller size than a GIF file.

APNG format (Animated Portable Network Graphics). Image format based on PNG format. Allows you to store animation and also supports transparency.

SVG format (Scalable Vector Graphics). An SVG drawing consists of a set of geometric shapes described in XML format: line, ellipse, polygon, etc. Both static and animated graphics are supported. Feature set includes various transformations, alpha masks, filter effects, the ability to use templates. Images in SVG format can change in size without reducing quality.

BMP format (Bitmap Picture). Represents the uncompressed (original) raster image, whose template is a rectangular grid of pixels. A bitmap file consists of a header, a palette, and graphic data. The header stores information about the graphic image and file (pixel depth, height, width and number of colors). The palette is indicated only in those Bitmap files that contain palette images (8 or less bits) and consist of no more than 256 elements. Graphic data represents the picture itself. Color depth in this format can be 1, 2, 4, 8, 16, 24, 32, 48 bits per pixel.

ICO format (Windows icon). File icon storage format in Microsoft Windows. Also, Windows icon is used as an icon on websites on the Internet. It is a picture of this format that is displayed next to the website address or bookmark in the browser. One ICO file contains one or more icons, the size and color of each of which can be set separately. The icon size can be any size, but the most common are square icons with sides of 16, 32 and 48 pixels.

2. Tag

Tag

The tag has a name attribute available, which specifies the name of the map. The value of the name attribute for the tag

Element

3. Tag

Tag describes only one active region as part of a client-side image map. The element does not have a closing tag. If one active area overlaps another, the first link from the list of areas will be implemented.

Table 2. Tag attributes

Attribute	Short description
alt	Sets alternative text for the active map area.
coords	Determines the position of the area on the screen. Coordinates are given in length units and separated by commas: For circle— coordinates of the center and radius of the circle; For rectangle— coordinates of the upper left and lower right corners; For polygon— coordinates of the polygon vertices in the required order, it is also recommended to indicate the last coordinates, equal to the first, for the logical completion of the figure.
download	Complements the href attribute and tells the browser that the resource should be loaded the moment the user clicks the link, instead of, for example, having to open it first (like a PDF file). By specifying a name for an attribute, we are thus giving a name to the loaded object. It is allowed to use an attribute without specifying its value.
href	Specifies the URL for the link. An absolute or relative link address can be specified.
hreflang	Specifies the language of the associated web document. Only used in conjunction with the href attribute. Accepted values ​​are an abbreviation consisting of a pair of letters indicating the language code.
media	Determines what types of devices the file will be optimized for. The value can be any media query.
rel	Expands the href attribute with information about the relationship between the current and related document. Accepted values: alternate - link to an alternative version of the document (for example, printed form pages, translation or mirror). author — link to the author of the document. bookmark - Permanent URL used for bookmarks. help - link to help. license - link to copyright information for this web document. next/prev - indicates the relationship between individual URLs. Thanks to this markup, Google can determine that the content of these pages is related in a logical sequence. nofollow - prohibits search engine follow links on this page or a specific link. noreferrer - indicates that when following a link, the browser should not send an HTTP request header (Referrer), which records information about which page the site visitor came from. prefetch - indicates that the target document should be cached, i.e. browser in background loads the contents of the page into its cache. search - Indicates that the target document contains a search tool. tag - indicates keyword for the current document.
shape	Specifies the shape of the active area on the map and its coordinates. Can take the following values: rect — rectangular active area; circle — active area in the shape of a circle; poly — active area in the shape of a polygon; default — the active area occupies the entire area of ​​the image.
target	Specifies where the document will be downloaded when the link is clicked. Accepts the following values: _self — the page is loaded into the current window; _blank — the page opens in a new browser window; _parent — the page is loaded into the parent frame; _top - the page loads in the full browser window.
type	Specifies the MIME type of the link files, i.e. file extension.

4. Example of creating an image map

1) Mark the original image into active areas of the desired shape. The coordinates of the areas can be calculated using a photo processing program, for example, Adobe Photoshop or Paint.

Rice. 1. Example of image markup to create a map

2) Set the name of the card by adding it to the tag

Jpg" alt="flowers_foto" width="680" height="383" usemap="#flowers"> !}
Rice. 2. An example of creating an image map, when you click the mouse cursor on a flower, you go to a page with a description

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

Let's start with theory, where would we be without it? The image map contains two tags: map- card container and area- selection zone. The map is not limited to one zone and can contain an unlimited number of them. Tag area In addition to standard attributes, it also has its own:

• 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

To connect the card to the image, specify the tag map attribute name with an arbitrary name, and attach a tag to the images usemap, the value of which is indicated in the format "#Name".

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

I was not happy with the prospect of using Photoshop to find the coordinates of each point, manually rewriting the numbers from the Info window, and the tools that I came across on Google were too monstrous. We decided to write our own small script, which would allow us to place points simply by clicking on the desired area in the image, and would display the finished code.

First, let's prepare the layout:

Buttons for controlling paint will be inserted into #bar.
#info will display the generated html code.

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 class, a little auxiliary functions, that's all. I hope this tool will be useful to someone.

Hi all. Andrey Bernatsky is with you.

In this tutorial I will talk about how to create image-maps in HTML.

Image map- this is some kind of picture, maybe a photograph that has several active zones.

For example, when you click on the active zone, you go to a specific URL. If you are on vkontakte.ru, there is an example of an image map - this is when you mark in a photo, and when you hover the mouse cursor over the person marked in the photo, his first and last name is shown, and when you click the mouse, you go to the page of this person.

First, I offer you a video version of this lesson:

This is all done quite simply. We take any photo with friends. It's better to insert it into its own separate block