How to make a hyperlink of an image in html

The <img> tag

You probably noticed more than once that many sites use different pictures as links, which by the principle of work are no different from text links. To replace a plain text link to an image, you need to place an <img> tag inside the <a> element, which indicates the path to the image:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Page title</title>
  </head>
  <body>

    <p>Visit our website by clicking on the picture:
      <a href="httрs://puzzleweb.ru">
        <img src="logo.png" alt="link">
      </a>
    </p>

  </body>
</html>
Try it »

Remove the border

When using images as links, browsers will automatically add a border to them, which is easily removed using the CSS border property with the value none.

To remove the border from the link image, you can set the border property to the style attribute:

<a href="httр://www.puzzleweb.ru">
  <img src="logo.png" style="border: none;">
</a>

This method is suitable when the link image is only one. But if you have many such links, it's better to make the style immediately to all the image links that are embedded in the <a> tag, you can do it like this:

a img { border: none; }

Just add this code to the other styles and it will remove the borders from all images that are links.

Copying materials from this site is possible only with the permission of the site administration and
when you specify a direct active link to the source.
2011 - 2021 © puzzleweb.ru

puzinfo@puzzleweb.ru | ruen