Тег IMG

We can add image as a link and other HTML elements as a link. A link is a connection from one Web page to another web page.

To make page links in an HTML page, use the and tags, with href attribute used to define the links. We should use the … tags inside … tags.

Syntax

Following is the syntax to add image as a link on the web page.

Example

Following is the example program to make image as a link.

DOCTYPE html> html> body> p>a href="https://www.Youtube.com/">img src="https://www.tutorialspoint.com/assets/questions/media/426142-1668760872.png" style="width:50px;height:50px;">a>p> body> html>

Following is the output for the image as a link, clicking on the image will navigate us to google home page.

Example

Following is the example program to make image as a link.

DOCTYPE html> html> body> center> h2>Image as a Linkh2> a href="https://www.tutorialspoint.com">img src="https://www.tutorialspoint.com/assets/questions/media/426142-1668760765.png" alt="Tutorialspoint" style="width:50px;height:60px;">a> center> body> html>

Following is the output for the image as a link, clicking on the image will navigate us to destination webpage.

Example

Following is another example program to make image as a link.

DOCTYPE html> html> head> title>HTML Image as linktitle> head> body> The following image works as a link:br> a href="https://www.qries.com/"> a> body> html>

After clicking on the image, it will redirect to the destination webpage.

Источник

Как сделать картинку ссылкой

Обычно ссылка выглядит как подчёркнутый участок текста, окрашенный в стандартный синий цвет. Нажимая на заинтересовавшую ссылку, пользователь переходит на новую страницу или сайт.

Ссылки в большой статье могут потеряться, а вот красочная картинка привлекает больше внимания.

Чтобы вставить изображение на сайт, используют тег . У тега есть четыре обязательных атрибута:

  • src — для указания пути до файла с картинкой и его отображения на экране;
  • width и height — размеры изображения. Эти атрибуты позволяют резервировать место для изображения, чтобы убрать «прыжки» страницы пока изображение грузится;
  • alt — альтернативное описание.

Адрес ссылки задаётся в формате URL с помощью атрибута href .

Часто изображения-ссылки используются в галереях, когда с уменьшенной версии изображения ставится ссылка на полноразмерную версию картинки или на отдельную страницу с этим изображением и подписью к нему.

Как выделить изображение-ссылку?

Если вы хотите выделить ссылку, сделайте картинку увеличивающейся или подсветите её цветом при наведении курсора.

Чтобы картинка-ссылка меняла цвет, пропишите в стилях её состояние:

Состояние :hover срабатывает, когда пользователь наводит курсор мыши на элемент. Но, если картинка совсем пропадёт, а вместо неё появится яркий цвет, пользователь не успеет рассмотреть изображение.

Чтобы цвет был полупрозрачным, а картинка просвечивала сквозь него, укажите свойство opacity .

Это свойство задает уровень прозрачности элемента. Значение 0 соответствует полной прозрачности, а значение 1 — полной непрозрачности. Укажите любое число от 0 до 1 , чтобы получить нужный уровень прозрачности.

На втором изображении видим эффект свойства hover при наведенном курсоре. Источник

Чтобы картинка увеличивалась при наведении курсора, примените свойство transform .

Теперь при наведении курсора картинка увеличится в полтора раза. Вместо числа 1.5 укажите подходящее значение, чтобы увеличить или уменьшить картинку. Больше единицы — увеличить, от 0 до 1 — уменьшить. Например, если нужно уменьшить картинку в два раза, укажите для свойства transform значение 0.5.

Полезные материалы

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Источник

Тег предназначен для отображения на веб-странице изображений в графическом формате GIF, JPEG или PNG. Адрес файла с картинкой задаётся через атрибут src . Если необходимо, то рисунок можно сделать ссылкой на другой файл, поместив тег в контейнер . При этом вокруг изображения отображается рамка, которую можно убрать, добавив атрибут border=»0″ в тег .

Рисунки также могут применяться в качестве карт-изображений, когда картинка содержит активные области, выступающие в качестве ссылок. Такая карта по внешнему виду ничем не отличается от обычного изображения, но при этом оно может быть разбито на невидимые зоны разной формы, где каждая из областей служит ссылкой.

Синтаксис

Атрибуты

align Определяет как рисунок будет выравниваться по краю и способ обтекания текстом. alt Альтернативный текст для изображения. border Толщина рамки вокруг изображения. height Высота изображения. hspace Горизонтальный отступ от изображения до окружающего контента. ismap Говорит браузеру, что картинка является серверной картой-изображением. longdesc Указывает адрес документа, где содержится аннотация к картинке. lowsrc Адрес изображения низкого качества. src Путь к графическому файлу. vspace Вертикальный отступ от изображения до окружающего контента. width Ширина изображения. usemap Ссылка на тег , содержащий координаты для клиентской карты-изображения.

Также для этого тега доступны универсальные атрибуты и события.

Закрывающий тег

      

lorem Lorem ipsum dolor sit amet.

Источник

HTML Tag

Girl in a jacket

The tag is used to embed an image in an HTML page.

Images are not technically inserted into a web page; images are linked to web pages. The tag creates a holding space for the referenced image.

The tag has two required attributes:

  • src — Specifies the path to the image
  • alt — Specifies an alternate text for the image, if the image for some reason cannot be displayed

Note: Also, always specify the width and height of an image. If width and height are not specified, the page might flicker while the image loads.

Tip: To link an image to another document, simply nest the tag inside an tag (see example below).

Browser Support

Attributes

Attribute Value Description
alt text Specifies an alternate text for an image
crossorigin anonymous
use-credentials
Allow images from third-party sites that allow cross-origin access to be used with canvas
height pixels Specifies the height of an image
ismap ismap Specifies an image as a server-side image map
loading eager
lazy
Specifies whether a browser should load an image immediately or to defer loading of images until some conditions are met
longdesc URL Specifies a URL to a detailed description of an image
referrerpolicy no-referrer
no-referrer-when-downgrade
origin
origin-when-cross-origin
unsafe-url
Specifies which referrer information to use when fetching an image
sizes sizes Specifies image sizes for different page layouts
src URL Specifies the path to the image
srcset URL-list Specifies a list of image files to use in different situations
usemap #mapname Specifies an image as a client-side image map
width pixels Specifies the width of an image

Источник

Читайте также:  Css автоматический перенос строк
Оцените статью