Creating banners and site maps, novice webmasters are faced with such a problem as inserting a link into a picture, making the menu brighter and more interesting with its help. But how to do this? Nothing is easier if you know the HTML language.
Let’s find out how this idea can be realized. In our 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 generally known. We will analyze both methods.
Where is the picture link used?
Before talking about how to make a picture in a picture a link, we will figure out where and why they are used. After all, it will be easier to understand what we want from the image.
Image links are usually used as banners inviting advertising drawings. An example of this is the image all in the same "VKontakte". Remember how many times you have clicked on a photo in which this or that address was embedded? In addition, quite often they are used as a menu of groups and communities, especially if they contain special entries. Many such images are found on other sites.
Insert the link into the picture
The simplest thing is a picture link. It is about her that we will talk to begin with. This illustration is a ready reference. That is, by clicking on such an image, you will be redirected to a new page.
If you know exactly how a regular link is set using HTML markup, then you should have no problems. The only difference is that an image is set instead of the link text.
So, in order to carry out your plan, you will need the picture itself, downloaded to the Internet or located on your computer (depending on whether you work in online mode, on the site itself, or use the editors).
We look for the address of the image, write it down so as not to forget. We also fix the link that this photo should open.
Next, write the following: <a href="link address"> picture </a> - a special code. The picture link is set precisely with its help.
Thus, we prescribe the link, which is displayed as an illustration. Pretty easy and simple. But this is only suitable if you think that it should be only one link. But what if there should be several? Then we pass to other options.
Making a menu from a picture
The first of the methods was developed independently during the study of 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 with various editors, since it is quite laborious and takes a little longer than creating a menu or map 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 tags are written in the desired order. That’s all, the question of how to make a picture in a picture a link is practically resolved. But do not forget about the second option.
It consists in making a menu with the participation of only one picture, setting a link for each area of the illustration. Do not be alarmed, there is nothing archaic about this. And now, first things first.
How to do
Let's analyze the first method in more detail.
To begin with, you will need knowledge of graphic editors and HTML. How to make a picture a link, this particular type of page layout will tell you.
So, if you decide to go this 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, the usual gallery or file library is suitable, for VKontakte it can be an album of a group or community (preferably closed).
Next, you should cut the image into parts, while be sure to remember the order in which the received parts go. We put inscriptions on them and fill them in on the server, write down links to each illustration.
We take the code indicated above and substitute the necessary data there. Then we fill in the pictures on the site in the exact order in which they should go. At the same time, 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, then you need to put as many links in the line as there were 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 a picture a link in another way, then we can offer you to develop a link map. It is made easier, but I can only have problems setting parameters. Why, understand further.
First of all, remember that the site map is connected to the image using the usemap = "# map1 command, which is written in the img tag. Therefore, when uploading a picture to the site, be sure to add the second part in the tag - usemap =" # map name ".
Further marking of the picture on the zones to which the links are attached is done using the pair <map> </map> tag, which can be placed in any place convenient for you between the pair <body> </body> tags.
Note that when using this type of map creation, you should specify not only links, but also their areas of action and coordinates. Next, we will analyze the main parameters that this tag has.
Link Options
So, before your eyes you have a finished picture-link. HTML can significantly improve the functionality of this image - to select a specific area for the link on it. All this is set by means of special parameters, which will be discussed now.
Let's talk a little about the main parameters of the <map> paired tag. First of all, it is name, which is equal to the value of usemap. So you mean that this card is written specifically for this picture.
Next, inside the paired <map> tag, another tag is registered - <area>, which describes the link area. He is not paired and, of course, he has his own parameters.
The very first is shape. With it, the webmaster sets the appearance of the area. It could be:
- circle - circle;
- rectangle - rect;
- polygon - poly;
- the rest of the image is default.
The next one is coords. With it, the coordinates of the area in pixels are set. The origin in this coordinate system is the upper left corner. This is where the main problem lies - it is not so easy to set coordinates using pixels, especially if you are not familiar with computer graphics.
We also mention the rather famous href, which sets the link address.
And the last parameter to mention is nohref. It shows that the specified area is not a link.
Of course, this is not a complete list of parameters that can be set for a picture link or map. But at the same time, it is enough to create a bright and colorful link or even their whole system.
Advice
Whichever way you choose to create a picture link , the main thing is that the original image is good. Try to choose those patterns that do not catch the eye, do not annoy with bright colors or patterns. This is especially important for the site map. You can make a collage of several photos, darken them, or turn on one of the filters in any image editor.
When creating a site map, it is recommended to choose images with soft, non-eye-irritating patterns. Believe me, not always the key to success - a vivid picture -link. “VKontakte”, however, often focus on brightness and brightness, in order to attract new visitors.
conclusions
To summarize. We figured out how to make a picture in a picture a link, and we examined two ways that can be equally successfully used to create menus of varying degrees of complexity. In addition, we figured out how to set a picture link, and also learned about the main parameters that allow you to create a fairly convenient map of a site, group or community.