In this article, we will look at how to create a client image map, when you click on a certain area of which, we can follow a specific link. Compiling image maps can rarely be found on websites, since this process is quite labor-intensive, but if you want to surprise your visitors unusual shape for links and you have free time for self-education, then this article is for you.
Tag
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:
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 ( graphics editor) and specify 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.
Clue: to get image coordinates, use an image editor, even the simplest editor, for example, Paint, will display the coordinates of the cursor. Write down the coordinates on a piece of paper or in a separate file and enter the values on the page.
If you have any difficulties completing the task, then inspect the page code by opening the example in a separate window and study it carefully.
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:
|
| 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.
HTML images added to web pages using a tag . The use of graphics makes web pages more visually appealing. Images help better convey the essence and content of a web document.
Using HTML tags
Inserting images into an HTML document
1. Tag ![]()
Element represents an image and its fallback content, which is added using the alt attribute. Since the element
is lowercase, it is recommended to place it inside a block element, for example,
Or
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:
| Attribute | Description, accepted value |
|---|---|
| alt | The alt attribute adds alternative text for the 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 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 go up one level, to the 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 are ideal for photographs and 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. GIFs can 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). An image format based on the 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. The set of functions includes various transformations, alpha masks, filter effects, and the ability to use templates. SVG images can be resized without losing quality.
BMP format (Bitmap Picture). It is an 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. The 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.
| 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, a printed form of the page, a translation, or a 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 - prevents the search engine from following links on a given 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. The browser in the background downloads the contents of the page to its cache. search - Indicates that the target document contains a search tool. tag - specifies the 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
pros
- Image maps allow you to define any shape for the reference area, which is especially useful for indicating a geographic area. Therefore, image maps are most often used in geographic areas.
- It is more convenient to work with one picture - you don’t have to worry about joining individual fragments when cutting, and the picture can be easily placed in the right place.
Minuses
- When the link area has a complex shape, 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.
- Accordingly, the complexity of specifying coordinates increases. It is not convenient to specify them manually, so you have to use special programs, which visually show areas and allow you to edit them.
- When changing the image, for example, when increasing the scale, you will have to re-set the coordinates of all reference areas.
- You cannot apply various effects to image cards that are available when cutting one picture into fragments: rolling effect, partial animation, individual optimization of pictures for fast loading.
- There are no clearly defined link boundaries. Therefore, these boundaries have to be highlighted using different means directly in the image. If the picture does not load for some reason, then understanding the set of links becomes very problematic.
From the standpoint of user convenience, image maps have only one advantage - the inclusion of links of various forms. 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.
Image cards are implemented in two various options- server and client. If the server option is used, the browser sends a request to the server to obtain the address of the selected link and waits for a response with necessary 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. To indicate that an image is a map, use the element's usemap attribute . The value is a pointer to the description of the card configuration, which is set using the element
Example 1: Creating an image map
Inside the container
Element has the following 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. Required attribute if href is present.
- title - displays a tooltip when you hover over an area.
- href - specifies the address of the document to go to; its effect is similar to a similar element attribute .
- coords - sets the coordinates of the active area. Coordinates are measured in pixels from the left top corner 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.
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.
