How to make a picture in a picture with a link? How to insert a link into a picture

By creating banners and site maps, novice webmasters are faced with such a problem as inserting a link into the picture, making it a menu brighter and more interesting. But how to do this? There is nothing easier if you know the language of HTML.

Let's find out how you can turn this venture into reality. In this article we will offer you two options for solving the problem. One is rarely used due to the fact that it takes a lot of time and effort, the second is considered well-known. We will discuss both ways.

Where the picture-link is used

Before we talk about how to make a picture in a picture a link, we'll figure out where and for what they are used. It will make it easier to understand what we want from the image.

Pictures-links are usually used as banners, invoking promotional drawings. An example of this can serve as images all in the same "VKontakte". Remember, how many times have you ever clicked on a photo in which a particular address was embedded? In addition, quite often they are used as menu groups and communities, especially if they contain special entries. A lot of such images are found on other sites.

Insert a link in the picture

The simplest thing is a picture-link. We'll talk about it first. This illustration is a ready reference. That is, clicking on such an image, you will be redirected to a new page.

If you know how a normal link is set using HTML markup, then you should not have problems. The only difference is that instead of the link text, an image is specified.

So, to carry out the plan, you will need the picture itself, downloaded to the Internet or located on your computer (depending on whether you will work in online mode, actually on the site, or use the editors).

We are looking for the address of the image, we write it down so as not to forget it. Also fix the link that this photo should open.

Then we write the following: picture - special code . A picture-link is set with it.

Thus, we prescribe a link that is displayed as an illustration. Quite easy and simple. But this will only work if you think that there should be only one link on it. And what if there should be more than one? Then we move on to the other options.

Make a menu from the picture

The first method was developed independently in the course of studying the markup language of web pages. Creating such a menu can take a couple of hours.

This method is suitable for those who like to mess around with different editors, since it is rather laborious and takes a little longer than creating a menu or a card in the second way. It consists in the fact that a picture is taken, which is cut into several strips or squares. Each image is signed and a link is created based on it, as described above. Further in the code of the page the tags are prescribed in the required order. That's all, the question of how to make a picture in the picture a link, almost solved. But do not forget about the second option.

It is to make a menu with only one picture, assigning a reference for each area of the illustration. Do not be scared, there is nothing extreme in this. And now about everything in order.

How to make

Let's take a closer look at the first method.

To begin with, you will need knowledge of graphic editors and HTML. As a picture to make a link, this type of page layout will prompt you.

So, if you decide to go that way, you will need an image and a simple graphic editor that allows you to cut pictures and put inscriptions on them, as well as a place where you can fill them.

If this is your own site - an ordinary gallery or a library of files is suitable, for "VKontakte" it can be a group or community album (preferably closed).

Next, you should cut the image into parts, while remembering the order in which the parts come. We put on them the inscriptions and fill it with the server, we write down the links to each illustration.

We take the code mentioned above and substitute the required data there. Then we upload pictures to the site exactly in the order in which they should go. In this case, if you cut it into strips, then you need to set each link from a new line, but if you divided the photo into squares, you need to put as many links in the line as there are squares.

Making a site map

So, if you are not satisfied with the first option, and you want to learn how to make a picture in the picture a link in a different way, then we can offer you to develop a map of links. It is made easier, here only I can have problems with setting parameters. Why, understand further.

First of all, remember that the site map connects to the image using the usemap = "# map1 command, which is prescribed in the img tag. Therefore, when filling out the image on the site, be sure to add the second part in the tag - usemap =" # map name ".

Further marking of the image into the zones to which the links are attached is done with the help of the pair

Note that when using this type of map creation, you should specify not only links, but also their action areas and coordinates. Next, we will analyze the basic parameters that this tagname possesses.

Link options

So, you have a ready-made picture-link before your eyes. HTML allows you to significantly improve the functionality of this image - to highlight on it a specific area for reference. All this is set by means of special parameters, which will be discussed now.

Let's talk a little about the basic parameters of the pair

Further within the paired tag

The very first is shape. With it, the webmaster sets the view of the area. It can be:

• Circle - circle;
• Rect rectangle;
• Polygon - poly;
• The rest of the picture is default.

The next one is coords. It is used to set the coordinates of the area in pixels. The origin in this coordinate system is the upper left corner. That's where the main problem lies - it's not so easy to specify coordinates by means of pixels, especially if you do not know the computer graphics.

We also mention the rather well-known href, which sets the address of the link.

And the last parameter to be mentioned is nohref. It indicates that the specified scope is not a link.

Of course, this is not a complete list of parameters that can be set to a picture-link or map. But at the same time it is enough to create a bright and colorful link or even a whole system of them.

Advice

Whichever way you want to create a link-image , the main thing is that the original image is good. Try to choose those drawings that are not conspicuous, do not irritate with bright colors or patterns. This is especially important for the site map. You can make a collage of several photos, darken them or include one of the filters in any graphics editor.

When creating a site map, it is recommended to select images with soft, non-irritating patterns. Believe me, not always the key to success is a bright picture-a link. "VKontakte", however, often focus on the brightness and flamboyance, in order to attract new visitors.

conclusions

Let's sum up. We have figured out how to make a picture in a picture with a link, and we looked at two ways that you can equally successfully use to create menus of varying degrees of complexity. In addition, we figured out how to set a link picture, and also learned about the basic parameters that allow you to create a fairly convenient map of a site, group or community.