Navigation charts. HTML image map What elements allow you to create image maps
Hello friends. In this video, we will continue talking about image maps in HTML. But first, let's remember what we talked about in the last video. The fact is that these videos are quite closely related to each other, and in order to understand what it is about, you need to watch the previous videos from the images section.
In the last video tutorial, we just started getting acquainted with image maps in HTML. We looked at how it should look in the end, however, with the use of scripts. We talked a little about coordinates. That is how we will define them. As you may remember, I opted for one of the methods, this is the method using the ismap attribute, since, in my opinion, this method of determining coordinates is the simplest and least complicated, which means that it suits us.
As a result, in the last video we made a picture-link. And then from the image they made a server map of the image, which will help us in determining the coordinates of hotspots.
Now it's time to start actually creating the image map in HTML. In this video we will cover quite a large number of information from theory to practice.
Let's start by looking at two more HTML tags, these are the tags
map HTML tag.
Tag
This tag has a required name attribute. In which we must specify the name of our image map. In addition, it is worth noting that this tag is not a block element, which means that it must be written inside a block element, for example, a paragraph tag or a universal div tag.
area HTML tag.
Tag responsible for specifying hotspots inside the container
Here I also want to mention what I forgot to say in the video tutorial, that this tag is easily replaced by a tag for specifying hyperlinks in an HTML document. That is, the tag . If you remember, then it is at the tag there are exactly the same attributes shape and coords , which are designed specifically to specify the base shape and its coordinates.
Determining the coordinates of a square, rectangle, circle and polygon.
Also in this video tutorial, we will analyze in great detail how to correctly determine the coordinates for a particular shape. How many coordinates should there be for a particular shape. This is due to the fact that each base figure has its own set of coordinates and the order in which they are obtained.
First, we will take a detailed look at the theory of how to determine the coordinates for a square, then for a circle, and finally, for a polygon.
After that, using a live example, we will determine the coordinates of a square and a rectangle. Then we determine the coordinates of the circle. And finally, we indicate the coordinates of the triangle, which in turn plays the role of a polygon.
In general, this video will be a very useful guide for those who have become interested in the topic of creating image maps in HTML.
Video tutorial: Creating an image map in HTML.
HTML-reference and other materials can and should be downloaded!
In the next video tutorial, we will finally study the topic of creating image maps, let's talk about the last attribute of the tag usemap , which will help us associate an image with an image map. And let's look at a couple more live examples of image maps in different pictures.
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 must include< >, which specify the geometric regions of the map and the links associated with each region
If the tag
If regions overlap, the region-defining element that appeared earlier in the document takes precedence.
HTML: 3.2 | 4 / XHTML: 1.0 | 1.1
Syntax
Attributes
| class | specifies the name of the class to use |
|---|---|
| dir | defines the character direction:
|
| id | unique identificator |
| language | defines the language of the displayed document |
| name | the name of the image map. Used as the value of the usemap tag parameter |
| onblur | loss of focus element |
| on click | click on an element |
| ondblclick | double click on an element |
| focus | receiving focus element |
| onkeydown | key press when element has focus |
| onkeypress | pressing and releasing a key when the element has focus |
| on-keyup | release the previously pressed key when the element has focus |
| onmousedown | mouse click when element has focus |
| onmousemove | mouse pointer movement when element has focus |
| onmouseout | moving the mouse pointer off the element |
| onmouseover | placing the mouse pointer on an element |
| onmouseup | releasing the previously pressed mouse button when the element has focus |
| style | specifies an inline style sheet |
| title | tooltip |
Example
- closing tag is required ()
- the id attribute is required
- it is recommended to provide a textual alternative to the graphics card for cases where the graphics are not available or the user cannot access them
- it is not recommended to use the image-map as the main navigation, due to poor support for old and voice browsers
Tag is a block-level element, i.e. tag content always starts on a new line. A line break is also added after the tag.
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.
Image map defined by pair tag . An HTML document can contain multiple image maps, so each map must be given a unique name, which is defined by the attribute name.
An image map consists of image sections and their corresponding links. Describes a portion of an image and associates a link with a single tag .
Tag Attributes
Coordinates are measured in pixels by default.
The origin of the coordinates 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 of them 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 areas of the map, by defining the last area of the map as a rectangle with the width and height of the entire image.
To use an image as a map in a tag
add an additional attribute usemap A that specifies the name of the image map. This name is preceded by a "#" sign.
Image Map Example
Clicking on different areas of this image changes the color of the corresponding text.
HTML images added to web pages using a tag . The use of graphics makes web pages 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 Or Tag
For Tag The image address can be specified in full (absolute URL), for example: Or via a relative path from document or root directory site: This is interpreted as follows: Without setting the image dimensions, the drawing is displayed on the page in its actual size. You can edit the dimensions of an image using the width and height attributes. If only one of the attributes is set, the second one will be calculated automatically to maintain the proportions of the picture. JPEG format (Joint Photographic Experts Group). JPEG images are ideal for photographs, they can contain millions of different colors. Images compress better than GIFs, but text and large areas of solid color can become blotchy. 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 transparent, allowing the background of a web page to show through part of the image. GIFs can also include simple animations. GIFs contain only 256 shades, which makes the images look blotchy and unrealistic, like posters. PNG format (Portable Network Graphics). Includes the best features of GIF and JPEG formats. It contains 256 colors and allows you 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: a line, an ellipse, a polygon, and so on. Both static and animated graphics are supported. The set of features includes various transformations, alpha masks, filter effects, the ability to use templates. SVG images can be resized without losing quality. BMP format (Bitmap Picture). Represents an uncompressed (original) bitmap whose template is a rectangular grid of pixels. A bitmap file consists of a header, a palette, and graphics data. The header stores information about the graphic image and the file (pixel depth, height, width, and number of colors). The palette is specified only in those Bitmap files that contain paletted images (8 bits or less) 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, the 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 site address or bookmark in the browser. One ICO file contains one or more icons, the size and color of each of which is set separately. The size of the icon can be any, but the most common icons are square icons with sides of 16, 32 and 48 pixels. Tag The name attribute is available for the tag, which specifies the name of the map. The value of the name attribute for the tag
Element Tag describes only one hotspot within the client-side image map. The element does not have a closing tag. If one hotspot overlaps another, then the first link from the list of hotspots will be implemented.
1) We mark the source image into active areas of the desired shape. Area coordinates can be calculated using a photo processing program, for example, Adobe Photoshop or Paint. 2) Set the map name by adding it to the tag Jpg" alt="(!LANG:flowers_foto" width="680" height="383" usemap="#flowers">
!}
Vlad Merzhevich Image maps allow you to link links to different areas of the same image. It is implemented in two different versions - server and client. In the case of the server version, the browser sends a request to the server to obtain the address of the selected link and waits for a response with the required information. This approach requires additional time to wait for the result and separate files for each image map. On the client side, the map is located in the same HTML document as the link to the image. The usemap attribute of the tag is used to indicate that an image is a map. Example 1: Using an Image Map
The usemap attribute is used to indicate to the browser that an image is a map. It is a link to the description of the map configuration, which is given by the tag Specifies the shape of the hotspot. The shape can be in the form of a circle (circle), rectangle (rect), polygon (poly). Adds alternative text for each area. Serves only as a comment for the link, as it is not displayed on the screen. Sets the coordinates of the hotspot. Coordinates are measured in pixels from the upper left corner of the image, which corresponds to a value of 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.
For a rectangle, the coordinates of the upper left and lower right corners.
For a polygon, the coordinates of its vertices are specified (Fig. 2). Rice. 2. Coordinate points for the polygon Image maps allow you to create links to different areas of the same image. Using this approach is clearer than regular text links and allows you to use only one graphic file to organize links. However, it should not be assumed that image maps should be included wherever graphical references are required. First of all, you should evaluate all the pros and cons, as well as look at alternative options. 1. Maps allow you to set any shape of the link area. Considering that images are rectangular in nature, it is not possible to make a graphical reference of complex shape, for example, to indicate a geographical area, without image maps. As a rule, maps-images are used most often in geographical subjects. 2. It is more convenient to work with one file - you do not have to worry about joining individual fragments and the picture can easily be placed in the right place. 1. Cannot set tooltip and alternative text for individual areas. Alternative text allows you to get textual information about the picture when loading images is disabled in the browser. Since images are loaded after the browser receives information about them, the replacement text for the image appears earlier. And as it loads, the text will be replaced by an image. For image maps, this feature is relevant, because if you turn off image viewing, which many users do, then in the end we will see only one empty rectangle. 2. With a complex shape of the link area, 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. In fairness, it should be noted that complex forms are a special case and are used quite rarely. 3. With image cards, you can't make different effects that are available when cutting one picture into fragments: the effect of rolling, partial animation, individual optimization of pictures for their fast loading. From the point of view of user convenience, image maps have only one advantage - 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. In all other respects, they are of no use - ordinary text links are more informative and they are not afraid of disabling the display of images in the browser. The fact that one image loads faster than the same image, but cut into fragments and saved as a set of graphic files, is easily circumvented. Each of these final files can be reduced using individual optimization settings. As a result, the total volume of all fragments will take up less space than one image. The psychological factor should not be discounted either - it seems to a person that a set of small pictures loads faster than one large one. The main drawback of the maps is that there are no clearly defined link boundaries. Therefore, these boundaries have to be distinguished by different means already in the image. If the picture did not load for some reason, then sorting out the set of links becomes very problematic. There is not always an urgent need to use image maps, so you should pay attention to the fact that there are other possible options for completing the task. In flash movies, you can create different areas of links using the capabilities of vector graphics. Thanks to its wide range of possibilities, Flash can create amazing menus and navigation tools. But here, too, care is required so as not to lose the forest for the trees. This is one of the popular design tools. In this case, one image is cut with the help of special programs into fragments, which are finally brought together, creating the illusion of a whole picture. Although the cut areas can only be rectangular, in most cases this is enough to create links. For each fragment, you can choose the most appropriate graphic format in which it will be saved, optimization options, add alternative text. Then, even if the display of images is disabled, the borders of the regions and the text replacing the image will be clearly visible. As it turned out, there is only one reason to use image maps - a complex form of links dictated by design goals. A typical application is regions of a geographic map that serve as links. In all other cases, you can get by with text links, and if you need to create graphical navigation, one image can be cut into fragments for convenience. This approach will create more convenience for users, especially those who, for various reasons, disable the display of images in the browser. They also need to be remembered.represents an image and its fallback content, which is added with alt attribute. Since the element
is inline, it is recommended to place it inside a block element, for example,
has a required attribute src , whose value is an absolute or relative path to the image:
the following attributes are available:
Table 1. Tag attributes
Attribute
Description, accepted value
alt
The alt attribute adds alternative text to the image. Displayed at the place where the image appears before it is loaded or when the graphics are disabled, and also displayed as a tooltip when you hover the mouse cursor over the image.
Syntax: alt="(!LANG:image description" .
!}crossorigin
The crossorigin attribute allows you to load images from resources from another domain using CORS requests. Images uploaded to the canvas using CORS requests can be reused. Allowed values:
anonymous - The cross-origin request is made using an HTTP header, and no credentials are passed. If the server does not provide credentials to the server from which the content is requested, then the image will be corrupted and its use will be restricted.
use-credentials - Cross-origin request is made with credentials passed.
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 image is part of a map image located on the server (a map image is an image with clickable areas). When you click on the 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 child of the element with a valid href attribute.
Syntax: ismap .longdesc
The image's extended description URL, padding 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 settings. Only works if the srcset attribute is set. 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 with or instead of the src attribute. The attribute value is one or more comma-separated strings.
usemap
The usemap attribute defines an image as an image map. The value must begin with the # character. The value is associated with the value of the name or id attribute of the tag
width
The width attribute specifies the width of the image in px .
Syntax: width="500" .1.1. Image address
url(http://anysite.ru/images/anyphoto.png)
url(../images/anyphoto.png) — relative path from the document,
url(/images/anyphoto.png) is a relative path from the root directory.
../ - means to 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
1.3. Graphic file formats
2. Tag
3. Tag
Table 2. Tag attributes
Attribute
Short description
alt
Specifies alternative text for the active area of the map.
coordinates
Specifies the position of the region on the screen. Coordinates are specified in units of length and separated by commas:
for circle— the coordinates of the center and the radius of the circle;
for rectangle— coordinates of the upper left and lower right corners;
for polygon— coordinates of the polygon vertices in the right order, it is also recommended to specify the last coordinates equal to the first ones, 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 on the link, instead of, for example, opening it beforehand (like a PDF file). By giving a name to 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. The accepted values are an abbreviation consisting of a pair of letters denoting the language code.
media
Specifies which device types the file will be optimized for. The value can be any media query.
rel
Pads the href attribute with information about the relationship between the current document and the linked document. Accepted values:
alternate - a link to an alternative version of the document (for example, a printable page, a translation, or a mirror).
author - a link to the author of the document.
bookmark is a permanent URL used for bookmarks.
help — link to help.
license - A link to copyright information for this web document.
next/prev - indicates the relationship between individual URLs. Through this markup, Google can determine that the content of these pages is linked in a logical sequence.
nofollow - prohibits the search engine from following links on this page or on a specific link.
noreferrer - indicates that when following a link, the browser should not send an HTTP request header (Referrer), which contains 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 loads the content of the page into its cache.
search Indicates that the target document contains a search tool.
tag - Specifies a keyword for the current document.shapes
Specifies the shape of the hotspot on the map and its coordinates. It can take the following values:
rect is a rectangular active area;
circle - active area in the form of a circle;
poly - active area in the form of a polygon;
default — the hotspot occupies the entire area of the image.target
Specifies where the document will be loaded when the link is clicked. Takes 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 is loaded in a full browser window.type
Specifies the MIME type of the link files, i.e. file extension.
4. An example of creating an image map
Rice. 1. An example of image markup for creating a map 
Rice. 2. An example of creating an image map, when you click on a flower, you go to a page with a descriptionClient version of the map-image
. The value is a reference to the description of the map configuration.
AREA tag attributes
shapes
alt
coordinates
href
Benefits of image maps
Flaws
Usability
Alternatives
Using Flash
Slicing images
Summary
