|
|||||||
|
Изображение в качестве ссылки
Время создания: 16.02.2019 15:46
Автор: alensav
Текстовые метки: Изображение, ссылка, httm, html
Раздел: MyTetra - INTERNET
Запись: xintrea/mytetra_db_alensav/master/base/1550321167piuk6iv2dw/text.html на raw.githubusercontent.com
|
|||||||
|
|
|||||||
|
Изображение в качестве ссылки Влад Мержевич Кроме текста, в качестве ссылок можно использовать и рисунки. Изображение в этом случае надо поместить между тегами <a> и </a>, как показано в примере 1. Пример 1. Создание рисунка-ссылки <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Ссылка</title> </head> <body> <p><a href="sample.html"><img src="images/sample.gif" width="50" height="50" alt="Пример"></a></p> </body> </html>
Атрибут href тега <a> задает путь к документу, на который указывает ссылка, а src тега <img> — путь к графическому файлу. Вокруг изображения-ссылки автоматически добавляется рамка толщиной один пиксел и цветом, совпадающим с цветом текстовых ссылок. Чтобы убрать рамку, следует у тега <img> установить атрибут border="0" (пример 2). Пример 2. Удаление рамки вокруг изображения <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Ссылка</title> </head> <body> <p><a href="sample.html"><img src="images/sample.gif" width="50" height="50" border="0" alt="Пример"></a></p> </body> </html>
Можно также воспользоваться CSS, чтобы убрать рамку для всех изображений, которые являются ссылками. Для этого применяется стилевое свойство border cо значением none (пример 3). Пример 3. Использование CSS <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Ссылка</title> <style type="text/css"> A IMG { border: none; } </style> </head> <body> <p><a href="sample.html"><img src="images/sample.gif" width="50" height="50" alt="Пример"></a></p> </body> </html>
Конструкция A IMG определяет контекст применения стилей — только для тега <img>, который находится внутри контейнера <a>. Поэтому изображения в дальнейшем можно использовать как обычно. |
|||||||
|
Так же в этом разделе:
|
|||||||
|
|||||||
|
|||||||
|
