HTML graphic cards. Play map image mouse

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, we just started familiarizing 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.

HTML Tags

Meaning and application

Tag Used to determine the image card. The image card is an image with a defined active area. Element Contains a number tags that define 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.

Support browsers

Tag			Opera.		Iexplorer.	Edge.
	Yes	Yes	Yes	Yes	Yes	Yes

Attributes

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 ), We specify the only and mandatory attribute of the Name element (card 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

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:

And so in order what we did in this example:

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.

Vlad Merzehevich

Image cards allow you to bind links to different areas of one image. It is implemented in two different versions - server and client. If the server is applied, the browser sends a request to the server to get the address of the selected link and is waiting for an answer to the required information. This approach requires additional time to wait for the result and individual files for each image card.

In the client version, the map is located in the same HTML document as the link to the image.

Client Image Card

To specify that the image is a map, use the Usmap tag attribute . The value indicates the link to the map configuration description.

Example 1. Using a map image

Map image

To specify the browser that the image is the map, the usemap attribute is applied. It is a reference to the configuration of the Card configuration, which is set by the tag . The NAME attribute value of this tag must match the name in Usemap. To set the asset area, which is a reference to an HTML document, a tag is used .

Attributes Tag Area.

shape

Determines the form of the active region. The form can be in the form of a circle (Circle), a rectangle (RECT), a polygon (Poly).

alt.

Adds alternative text for each area. It serves only a comment for reference, since the screen is not displayed.

coords.

Specifies the coordinates of the active area. The coordinates are counted in pixels from the upper left angle of the image that corresponds to 0.0. The first number is the horizontal coordinate, the second is vertically. The coordinate list depends on the form of the region.

For the circle, three numbers are set - the coordinates of the center of the circle and the radius.

For a rectangle - the coordinates of the left upper and right lower corner.

For the polygon, the coordinates of its vertices are set (Fig. 2).

Fig. 2. Coordinate points for landfill

href.

Image cards allow you to create links to different areas of one image. Using this approach is clearly than regular text links and allows you to apply only one graphic file to organize links. However, it is not necessary to assume that card images should be included everywhere where graphic links are required. First of all, you should evaluate all the arguments for both against, as well as view alternative options.

Advantages of cards

1. Cards allow you to specify any form of reference area. Considering that images by their nature are rectangles, make a graphical reference of a complex form, for example, to indicate the geographical area, without card images is not possible. As a rule, in the geographical topics of the map image and apply most often.

2. With one file more convenient to work - you do not have to take care of the purchase of individual fragments and the picture can be easily placed in the right place.

disadvantages

1. You cannot install a pop-up tip and alternative text for individual areas. Alternative text allows you to obtain text information about the picture when the image loading is disabled in the browser. Since the loading of images occurs after receiving the information browser about it, the replacement pattern text appears earlier. And as it loads, the text will be replaced by the image. For cards, this feature is relevant, because if you disable the viewing of images that many users do, we will eventually see only one empty rectangle.

2. With a complex form, the reference area increases the amount of HTML code. The contour is approximated by a set of straight segments, two coordinates should be set for each point of such a segment, 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 rarely applied.

3. With cards, images cannot be made different effects that are available when cutting one pattern per fragments: rolling effect, partial animation, individual optimization of pictures for quick loading.

Yuzability

From the standpoint of user convenience, card images have only one advantage - references of a variety of form. This adds clarity in the information presentation - we are not limited to the rectangular form of reference and can use the references of the complex configuration for their purposes. In all other relations from them, there is no use - the usual text links are more informative and it is not scary to disable the display of pictures in the browser. The fact that one image is loaded faster than the same picture, but chopped into fragments and saved in the form of a set of graphic files is easily accounted for. Each of these end files can be reduced using individual optimization settings. As a result, the total volume of all fragments will occupy less space than one image. Do not discount and psychological factor - a person seems to be that a set of small pictures is loaded faster than one large.

The main defects cards are not clearly dedicated link boundaries. Therefore, these borders have to be allocated by different means in the image. If the picture does not boot for any reason, it becomes very problematic in the set of references.

Alternative options

There is no urgent need to use card images, so you should pay attention to the fact that there are other possible options for performing the task.

Using Flash.

In Flash-rollers, you can create different links of links using vector graphics. Thanks to wide opportunities, you can create stunning menus and navigation tools on Flash. But here also care is required not to lose behind the forest trees.

Cutting images

This is one of the popular funds in design. One image in this case is cut through special programs to fragments, which are finally reduced together, creating an illusion of a solid picture. Although the cutting areas can only be rectangular, in most cases this is quite enough to create references. For each fragment, you can choose the most suitable graphical format in which it will be saved, optimization options, add alternative text. Then even when the pictures are disabled, the boundaries of the areas and the image of the text will be clearly visible.

Summary

As it turned out, the reason for using maps-images is only one - the complex form of references dictated by the design tasks. Typical application - regions of a geographic map that serve as references. In all other cases, you can do text links, and if you need to create graphic navigation, one image for convenience can be cut into fragments. This approach will create more convenience to users, especially those that, for different reasons, disconnect the display of images in the browser. They also need to remember about them.

"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..