Useful Tips

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


In addition to text, images can also be used as links. In this case, the image must be placed between the tags and, as shown in Example 1.

Example 1. Creating a link image

Around the image link is automatically added a frame with a thickness of one pixel and a color matching the color of text links.

To remove the frame, set the border = "0" attribute on the tag (example 2).

Example 2. Removing the frame around the image

You can also use CSS to hide the border for all images that are links. To do this, use the border style property with the value none (example 3).

Example 3. Using CSS

The A IMG construct defines the context for applying the styles — only for the tag that is inside the container. Therefore, images in the future can be used as usual.

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 instead of link text, an image is specified.

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.

Further we write the following: the picture is 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 just 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 upload them to 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.

Why do I need to make a link from a picture

a) For example, you have a beautiful picture of a wonderful product. You create a link from it, paste it into a specific resource. A person visits this site, sees a picture, clicks on it, and enters the online store where this product is located!

Comfortable, I think, yes! Clicking on beautiful images is higher than on a simple ordinary link. Often under the pictures hide their affiliate links.

b) If you are registered in an affiliate program, you have your own website, and the affiliate program owner has not provided the necessary advertising materials. What to do in this case?

It is enough to copy images of his goods, put a screenshot on the site, and make the picture a link. It will be something like a banner, but with less load on the site. In my opinion, it is very convenient and beautiful. Especially if you draw beautifully (or know someone who can beautifully draw a specific banner for you). Make a link from this banner image and, again, the clickability on this banner image increases.

c) The third reason is similar to the second. I think I won’t tell you a secret that because of the banners the load on the site is significantly increased. After all, what is someone else’s banner on your site?

This is an image located on an extraneous resource that your site requests while loading one of its pages. The bottom line is that the time of this request can vary significantly, from fractions of a second to several seconds.

For example, I used to have a static banner from a well-known company on my site. The banner was beautiful, with constantly changing pictures. But the bottom line is that it really slowed down the loading time of the site. Download time reached up to 50 seconds. This is a lot!

As soon as I deleted this banner, my blog started loading several times faster (the site started loading in 1.5 seconds, not 50!)! That is, you can create a screenshot of this banner, insert a link in the screenshot and its loading time will not be a few seconds, but a split second! Although, of course, not so beautiful. It will not change, but site loading time is more expensive!

d) I think I won’t surprise the web. masters, if I say that some of your banners users simply do not see. In the browsers of such people, there is the extension "Anti-block" or "Adguard". These extensions simply block ads. Including part of the banners.

If you have a picture link, an anti block will perceive a similar banner as a normal image, and not a block. For example, I had a “live pictures” banner for some time, but there were few clicks on it. At the beginning I did not understand what was the matter, then I saw that Adguard simply blocks it.

I went to the manufacturer’s website, took a screenshot of the part of the material that I liked, created a link from the picture and the result is obvious, more than one blocker no longer blocks it. Moreover, the copy came out even more beautiful than the original, and works great, you can see for yourself!

d) Another reason why it’s better to make a banner out of a banner is just a picture, I would say that search engines, especially Google, do not like to see a lot of advertising on a site. And they will perceive your picture as a link, simply as yet another image, and not as an advertisement. Conveniently? I think yes! But, let's get back to the essence of our question.

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 a pair tag, which can be placed in any place convenient for you between pair tags

How to insert a picture - html tags Img

Let's say that you use a visual editor to write articles that allows you not to think about exactly how image tags and hyperlinks are written in the code. But the fact is that no editor is perfect, and often to fix another bug in the design of the text of the article, you just need to switch to the html mode of the editor and make changes directly to the tags of the pictures and links.

If you know how to embed images and links in an HTML document, this can greatly simplify your life and save time. Moreover, to study the ten most common elements is not difficult. There are not so many really used tags in modern typesetting, and, of course, today's heroes are one of the most common and often used.

On the other hand, in the design of the template you use, the same elements are also actively used - inserting links, images, containers, lists (it is mentioned here), various forms and tables (Tr, Th, Td, Table).

And, therefore, in order to understand the structure of the template (here we talk about Joomla templates, and here about WordPress themes) and, if necessary, make changes to it, again you need to know at least a small number of code elements. Believe me, the time spent on this will more than pay off in the future. Well, we will assume that I convinced you of the need to familiarize yourself with the markup language and it's time to go directly to the heroes of our publication today.

To insert pictures The html Img tag serves on the page. The picture below is inserted using it:

The Src attribute allows you to specify the name and location of the image file (in other words, the path to it). In this case, a relative or absolute link to the image file may be indicated. The paths are specified using the '/' character, which serves as a separator between the names of the subdirectories in which the image files are stored.

The absolute path to Src will begin with (for my blog - Further, using '/' to separate the names of subfolders, the full path to the image file is written, ending at the end with the name and extension of the file itself. For example, /images/kakvstavitvhtmlssilkuikartinkufoto_9F70C277.jpg

The relative path in Src is set by determining the relative path from the source folder, which contains the file of the HTML document itself and from which you are trying to open the image, to the image file. If this file is located on the server in the same folder as the document from which it is accessed, then you do not need to specify the path to it - you only need to specify the name of the graphic file (keeping the case of letters).

If this file is located on the same server, but in a different directory, you must specify the path to it from the directory where the document from which it is accessed is located (in the example shown above, the relative path is used - image / finik.jpg) .

Set the width and height of the image using the Width and Height attributes

Html attributes Width and Height allow you to set the size of the area (width and height, respectively) that will be allocated on the page for this image. They are inserted inside the Img tag, for example, like this:

If this area does not correspond to the actual size of the image that you want to insert, then the image will be accordingly stretched or narrowed to the specified size. Nevertheless, this method should not be used, say, to reduce the size of the picture inserted into the document. After all, its weight will still remain large, and this will slow down the loading of the web page.

It is better to first resize the image in a graphics editor (you can even in the online photo editor), and only then insert it into the document. Also, when saving a graphic file, you should pay attention to its total weight. It should not be too big. Sometimes it’s better to sacrifice the image quality a bit (the benefit is that with small sizes it will be practically not noticeable) to reduce the final weight.

When saving images, use compact raster graphics formats such as GIF (for inserting schematic images) or JPG (for inserting photos). Width and Height, unlike the Src attribute (the only required in the Img tag), are optional. Many simply do not indicate them, but they nevertheless allow slightly speed up document loading.

The fact is that if the browser does not find the Width and Height inside the html of the Img tag, then it will take time to find out the size of the image, load it and only then continue to load the rest of the document. In the case when you specified Height and Width, the browser automatically reserves a place for the image of the sizes indicated in these attributes and continues to load the web page further.

If the graphic files displayed on this page are very heavy and there are a lot of them, then inserting Height and Width will allow users to start reading the text of the site, while the graphics will still be loaded.

Also, if you do not specify Width and Height inside Img, then a situation may arise when, with a small picture and a very long alternative text (set by the Alt attribute in the Img tag, this will be discussed below), before the graphic loads, a shift will temporarily occur site design because a long alternative text will take up as much space as it needs.

If Width and Height are used, the place for displaying alternative text will be limited by the sizes specified in them. For the most part, it is because of this that I try to write these attributes in the Img tag.

Alt and Title in html Img tag

From the point of view of internal search engine optimization of the site, the Alt and Title attributes are very useful. Read about the promotion and promotion of the site yourself or in the publication "How to promote the site."

The first of them defines the so-called alternative text for the image. You can see this text if you disable the display of graphics in your browser. Alt is intended for this purpose - to tell search engines about what kind of picture should have been here. Title is intended to inform the user about the content of the picture.

The contents of the Title from the composition of the Img tag are displayed in a pop-up line if the user moves the mouse to the picture. Both of these attributes (if you have registered them) allow you to include images of your web project in the search for Yandex and Google Images images. Therefore, do not neglect this opportunity and be sure to register at least Alt. The design of your images should be something like this:

In fact, there are a lot of attributes that can be used in the html Img tag and you can see all of them at least at the link provided. But you will most likely use in practice only those listed by me in this article.

Once again, I remind you of the rules for writing tags. After the opening triangular bracket, necessarily without a space, its name is written, then, after a space, it writes the name of the attribute valid for it. After the attribute name, without a space, an equal sign is placed and its parameter is written in quotation marks (for example, the width in pixels for Width).

The next attribute inside the html tag is separated from the previous one by a space. A closing triangular bracket is placed at the end. I draw your attention to the fact that Img is not a pair, i.e. it does not have a closing tag.

Ideally, something like this should be designed all the pictures used on your web project. This type can be achieved without manually editing the html code for each image. Visual editors of various CMS (Joomla, WordPress, etc.) allow you to set all this wealth in a user-friendly graphical interface, but after trial setup, be sure to check the code (in any visual editor you can switch to displaying the html code of the article).

Create hyperlinks using the html link tag "A"

Link is one of the main elements of organizing a document in Html. Without them, a web page would be just a page. They are created using the "A" tag. Mandatory attribute is only Href. It sets the URL (path) where the user should go by clicking on this hyperlink.

Ссылка может вести как на внутреннюю страницу вашего же ресурса (очень важный момент внутренней оптимизации связан именно с перелинковкой страниц сайта)), так и на страницу другого проекта. Html тег A является парным и, соответственно, имеет закрывающий элемент. Текст гиперссылки (анкор — тут про него подробно написано в плане способствования SEO продвижению) размещается между открывающим и закрывающим тегами «A».

Поисковые системы анализируют не только сам анкор, но и слова окружающие ее. Это следует учитывать при размещении ссылок на свой сайт на других ресурсах. Для того, чтобы она выглядела более натурально, можно часть текста вынести за пределы анкора, например:

Opening in a new window and a link from the image (image)

Well, okay, we again got distracted by search engine optimization. Back to the tags again. For the html tag "A" there is one very necessary attribute that will allow you to open the page to which this link leads in a new window. This may be necessary if you link to many external documents from one of your pages. In this case, it would be more convenient for the visitor to keep your page always open.

Target for this purpose has a parameter that allows you to open the page in a new window, which is called _BLANK. If Target is not set in tag A, then the link will open in the same window. An example of using the Target attribute:

Please note that the order of the attributes inside the tags is not regulated in any way. You might as well write:

As an anchor for html link tag instead of text image can be used. In this case, Img is the opening and closing tags A:

It is believed that search engines value links from the image above, and according to some sources, the opposite is true. But when using this type of links there is no anchor into which you can insert the desired keywords. In this case, you can use the Title attribute for tag A.

Title can be used in the case of regular text anchor. In this case, the information written in it will be visible if you move the mouse cursor to the hyperlink. Actually, this attribute can be used in almost all Html tags, but there won’t be much use for it.

Creating anchors and hash links

Another interesting attribute is NAME, which used to be quite widely used to create the so-called link anchors, which could be accessed using the so-called hash links. A bit confusing, but now I’ll try to clarify. Let's say you need refer to a specific place in the text of a document (not at its beginning), where there is a discussion of a specific issue.

If you put a simple hyperlink to this article, then after clicking on it the article will open at the very beginning and the user will have to find in it the place you want to concentrate on. So with the help of anchors and hash links, you can make the article open exactly at the place where you conceived and the user does not have to shovel excess material.

To implement the described method of creating hyperlinks in an Html document, previously you had to first insert an anchor in the article to which the hash link will lead. The anchor was a structure resembling a regular link, but at the same time it remained invisible to the visitor. He looked like this:

Those. it turns out that the anchor consisted only of an opening and closing tag “A”, while it did not contain an anchor and had one single required attribute NAME. The parameter of this attribute was the label, the name of which you had to set yourself. This label was later used to create the hash link.

Now this is the way to insert anchors considered obsolete and the HTML validator will be regarded as gross error. Please pay attention to this. Now anchors are placed by adding an ID selector to the nearest tag.

Suppose for a title in an article, this might look like this:

So, after we have placed all the necessary anchors in the text of the article, we can begin to create hash links that will refer to places in the text of the article that are previously marked in the manner described above (using the ID selector).

The hyperlink is created in the standard way, except that at the end of the Url, which is prescribed in Href, a pound sign (a sharp sign or a hash symbol) is placed, and after it comes the name of the anchor label that is in the required place in the text of the article.

The hash link will look something like this:

Using a hash link, you will not only go to the desired page, but also the browser will automatically scroll to the right place in the text.

If the anchor is in the same Html document as the hash link, then only the anchor can be specified.