What is the image maps are needed. Map image in HTML

Image Map (Image Map) Allows you to bind links to image fragments. By clicking on the individual parts of the image, the user can switch to a given link to different Web pages.

Image map is determined by a pair tag … . HTML document may contain multiple image cards, so each map must be assigned a unique name that is determined by the attribute. name..

The image map consists of sections of the image and the corresponding links. Describes the image site and puts it in line with a single tag link .

Tag Attributes

The default coordinates are measured in pixels.

The origin of the coordinate is the top left corner of the screen, i.e.

Examples of various form of image card areas

If the two areas described are superimposed on each other, then the reference 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 regions of the card, having determined the latest map of the card as a rectangle width and all over the image.

To use the image as a map, in tag You must enter an additional attribute. usemapdefining the name of the image map. Before this name is the "#" sign.

An example of using Image Map

When clicking on different areas of this image, the color of the corresponding text is changing.

"I made a workpiece to accommodate the links to various web pages defined areas (" ")

Now, if you click on the figures with inscriptions, the corresponding pages will open: profile, diary or all posts from the section "Photoshop lessons" (ATTENTION! After transferring the blog to the WordPress and his alterations, the links do not work! But the lesson remains relevant!)

In order for the picture to work, I wrote about such an HTML code:

This code can be inserted into the message field (when the "Source" button is pressed) or to the epigraph ...

By the way, there are other posts on the topic: "What is html ","HTML code of drawings ","Link picture "and so on.

1. Coordinates

To compile the specified code, I remembered a little geometry :)

Coordinate system: X axis - top down, Y axis - from left to right
To specify the coordinates of the figure, you need to install:
- Square (or rectangle), the sides of which are parallel to the axes - the coordinates of the two opposite angles - x1, y1 and x2, y2
- polygon - coordinates of all angles
- Circle - center coordinates and radius.

In my case, it turns out, the coordinates of the points A, C are for reference "Profile" (rectangle), points D, E, F, G, H - for the link "Diary" (polygon), q and length R - for reference " PHOTOSHOP lessons »(Circle). All these numbers in HTML code are highlighted in red. In addition, you need to know the size of the image in pixels (green)

There is no need for special accuracy, so it is possible to determine the coordinates with the help of the "line" in Photoshop - to call it to call Ctrl + R.

I was more interesting for someone else to calculate the coordinates. For this launch MS Paint (Start - All Programs - Standard - Paint) and open a drawing in it. When you hover the cursor to the desired points in the bottom panel, their coordinates appear that carefully recording

2. HTML code

Navigation cards are set by tag

Tag Map includes tags which define the geometric fields of the drawing and associated references.

I figured it out - to create a navigation card needed:

— tags with image description

— card tags

— tags regions

In my case, the values \u200b\u200bturned out to be:

width \u003d. "640" Height \u003d. "367" - Dimensions of the image
src \u003d "https: //syt/f02c73a3cd94.jpg" - address of the image on the site
usemap \u003d "# picture " - Conditional image-card name (maybe any)
map Name \u003d. "Picture" - Map Name (fully corresponds to the above)

Values \u200b\u200bfor link areas - href - the target of the link, Shape - the form of the area and coords - coordinates - correspond to the three areas (Area) in the image.

Rectangle "Profile"

href \u003d "https: // Site / Profile /" - profile page address
shape \u003d "RECT" - the designation of the form "Rectangle"
coords \u003d "235,61,472,117" - coordinates of points A (235.61) and C (472,117)

Polygon "Diary"

href \u003d "https: // Site / Blog" - diary page address
shape \u003d "Poly" - the designation of the form "Polygon"
coords \u003d "235,118,362,118,474,152,457,207,29,146" - coordinates of the angles of the polygon: points D (235,118), E (362,118), F (474,152), G (457,207) and H (229,146)

Circle "Photoshop Lessons"

href \u003d "https: //syt/showjournal.php? journalid \u003d 2447247" - the address of the posts of the posts from the section "Photoshop Lessons"
shape \u003d "Circle" - designation "Circle"
coords \u003d "551,198,65" - Circle coordinates: Center - point Q (551,198) and radius - R \u003d 65

3. Finish

Submolded all the obtained values \u200b\u200bin the "system" of the HTML code for the navigation map image and received the following:

It is this code when using "turns" into the picture with link areas.

For training there is a "lightweight" easy version of creating links - post "Training: Links in the image"

If you have found a mistake, please select the text fragment and click Ctrl + Enter..

In this article, we will consider how to make a client image card, when you click on a specific area of \u200b\u200bwhich, we will be able to go to a specific link. Mapping maps can be rarely found on sites, as this process is quite time consuming, but if you want to surprise your visitors with an unusual form for references and you have free time for self-education, then this article is for you.

Tag Used to determine the image card. The image card is an image with a defined active area. Element Contains a series of tags that determine the interactive areas in the image-card, i.e. When you click on a specific area of \u200b\u200bthe image, certain actions occur, for example, a separate page opens with a description of this section of the image.

Attribute Name Element is mandatory, it is associated with the usemap element attribute (Creates a connection between the image and the card).

Attributes tag We indicate both the coordinates of the area (COORDS attribute) and the type of figures you need (Shape attribute):

Example of use

Let's consider an example in which when clicking on a specific figure in one picture, there is a transition to different web pages that describe these figures (links to Wikipedia):

</span>Example Using tag <map>

Choose a figure:

"4 figures are available for choice" > "Red Square"> coords \u003d "200,75,50" href \u003d "green.html" alt \u003d "(! Lang: Green Circle." > !} "Blue Triangle"> "450,25,435,60,400,75,435,90,450,125,465,90,500,75,465,60" href \u003d "yellow.html" alt \u003d "(! Lang: Yellow Star" > !}

And so in order what we did in this example:

Placed the image (tag ), Which we will later use when drawing up an image card. In the Usmap attribute, you must specify the name of the image card that we will use in the element (It is necessary to specify the lattice before the name).

Place the image map (tag ), set the only and mandatory attribute of the Name element (name). Note that in contrast to the tag We ask a name without a lattice, they must coincide otherwise.

We place four tags
that define interactive areas in the map:
- First We ask rectangular region (Shape attribute with the value "RECT"), it matches our first Image ( first two values \u200b\u200bcorrespond to the upper left corner, the following two Values \u200b\u200bdefine the right upper and lower angle).
- Second Indicate round area (Shape attribute with the value "Circle"), it matches our second Image ( first The value corresponds to the coordinates on the axis x., and second along the axis y., thirdly determines radius).
- Concerning arret and fourth Figurethen they are drawn up on the principle polygonal region (Shape attribute with "POLY"). You define the required number of points on the image, calculate the coordinates of these points (graphic editor) and specify in this order so that the browser can connect them to one line. On the example of a triangle (third drawing): first Point (coordinate x. and y. vertices) second Point (coordinate x. and y. left lower corner) and thiny Point (coordinate x. and y. lower corner).

I draw your attention to the fact that if the tag has a practical task number 26.

Nuance: For the purity of the practical task, I propose as the first point to use the top of the star and move clockwise. As the value of the href attribute, I indicated # In this case, it acts as a plug (you stay on the same page), you can make the transition to any page.

prompt: To get the image coordinates, use the image editor, even the easiest editor, for example, Paint.Displays the coordinates of the cursor. Write the coordinates on the sheet or in a separate file and make the values \u200b\u200bon the page.

If you have difficulty performing a task, then inspect the page code by opening an example in a separate window and read it carefully.

Hello everyone. With you Bernatsky Andrei.

In this lesson, I will tell you how to create map images in HTML.

Map image - This is a picture, maybe a photo that has several active zones.

For example, when you press the mouse on the active zone, go to a specific URL. If you sit in vkontakte.ru, there is an example of a map image - this is when celebrated in the photo, and when you hover the mouse cursor on a person marked in the photo, its name and surname are shown, and when you click the mouse, go to the page of this person.

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

It is all right enough. We take any photo with friends. It is better to insert it into your separate block.

Xhtml

I took my photo for example.

For div set id In order to be able to assign some indents or yet, what will be needed. I won't ask anything in my example.

The main parameter of the tag img In this case, is usemap \u003d "# img-nav". He points to the map with what name we will refer.

Xhtml

We go in order.

- The value of the Name parameter must match the value of the Usmap parameter IMG tag, only at the MAP tag it is recorded without a symbol #.

Parameter shape Tag - Shows what type of our area will be. On what our area will be, shows the value of the parameter shape:

rECT - indicates that the area will be in the form of a rectangle.

poly is an arbitrary polygon.

circle - the area will be in the form of a circle.

Parameter coords. Contains the coordinates of our area.

If a shape \u003d "RECT"This indicates the coordinates of the left upper angle and the right lower. That is, the first pair of numbers indicates the upper left, and the second pair of numbers is to the lower right corner.

If a shape \u003d "Poly"The coordinates of each top of the polygon are indicated. shape \u003d "Poly" coords \u003d "80,100,150,100,210,40,300,40,300,110" In this case, the coordinates of the first vertices will be 80,100, the second 150,100, the third - 210.40, the fourth - 300.40, fifth - 300,110.

If a shape \u003d "Circle", I specify the coordinates of the center and the radius. shape \u003d "Circle" Coords \u003d "300,300,100" Here the coordinates of the center 300,300 and the radius 100.

title \u003d "(! Lang: Andrey" alt="Andrey" !} Already familiar parameters. I will not stop on them.

The full code is presented below:

Xhtml

Greetings, friends. In this video, we will continue the conversation about the maps of images in HTML. But first, let us remember what we talked about in the past video. The fact is that these videos are quite closely related to each other, and to understand what we need to see the previous video from the image section.

In the last video lesson, we just started acquaintance with image maps in HTML. We looked at how it should look ultimately, however, with the use of scripts. A little talked about the coordinates. That is, how we will define them. As you can remember, I opted on one of the ways, this is a way using an ISMAP attribute, since, in my opinion, this method of determining the coordinates is the most simple and less difficult, which means that it is suitable for us.

As a result, in the past video, we made a link. And then from the image made an image card image that will help us in determining the coordinates of active areas.

Now it's time to proceed with the direct creation of a map of the image in HTML. In this video, we cover a fairly large amount of information, starting with the theory and moving towards practice.

Let's start with the study of two more HTML tags, these are tags and . These tags are designed to create an image card in an HTML document.

HTML tag map.

Tag Creates a certain container in which active areas will be indicated. When adding tag In the HTML document, we will not see any changes on the page, since this tag does not add any information. It simply creates a container that will denote the start of the image card and its completion.

This tag has a mandatory Name attribute. In which we must specify the name of our image card. In addition, it is worth noting that this tag is not a block element, which means it is necessary to register it inside the block element, for example, a paragraph tag or a universal DIV tag.

HTML Tag Area.

Tag responsible for the indication of active areas inside the container . It is this html tag that defines an active area inside the image, indicates which figure we use, indicate the description, using the mandatory attribute ALT, and most importantly, using the Coords attribute for the tag We can specify the coordinates of active image map areas.

Here I also want to mention what I forgot to say in a video lesson that this tag is easily replaced by the tag to indicate the hyperlink in the HTML document. That is, tag . If you remember, the tag There are exactly the same Shape and Coords attributes that are designed specifically to indicate the basic figure and its coordinates.

Determination of the coordinates of the square, rectangle, circle and polygon.

Also in this video lesson we will analyze in very detailed how to correctly determine the coordinates for a particular figure. How many coordinates should be for a specific figure. This is due to the fact that for each basic figure there is a set of coordinates and the procedure for their receipt.

First, we consider in detail in the theory how to determine the coordinates for the square, then for the circle and finally for the polygon.

After that, on a living example, we will define the coordinates of the square and rectangle. Then we define the coordinates of the circle. Finally, we indicate the coordinates of the triangle, which turns its turn to the role of a polygon.

In general, this video will be a very useful benefit for those who have become interested in the creation of image cards in HTML.

Video lesson: Creating an election card in HTML.

HTML directory and other materials can be downloaded!

In the next video, we will finally study the topic of creating image cards, let's talk about the last attribute of the tag Usemap, which will help us link a picture with a map of the image. And consider another couple of living examples of images of images on different pictures.