Изображение в html (тэг img src), как задать фоновые изображения, рамки, отступы.

Приветствую вас, читатели TakProstoTak.ru, сегодня будем говорить на тему изображений в html. Как вставить изображение в код html? Как менять размер изображения? Как задать фоновое изображение для некоторых html элементов и как сделать кнопку html формы изображением? на эти и многие другие вопросы я отвечу в этой статье. По ходу пьесы разберем, как выглядит html код изображения и как сделать изображение ссылкой. Рассмотрим как наложить текст на изображение.

Работа с изображениями в html

Вставляем изображение в текст html, меняем размер изображения

Любая веб-страница базируется на языке гипертекстовой разметки (HTML). Ни для кого не секрет, что кроме текста на веб-странице можно размещать так же изображения. Если вы не так давно начали изучать "штмл", у вас могут возникнуть некоторые трудности, связанные с тем, как вставить изображение на страницу вашего сайта, как задать расположение изображений относительно друг друга и относительно текста, задать требуемое обтекание текста.


Принципиальных сложностей тут нет, вставка изображения делается при помощи html тэга IMG, а расположение в тексте регулируется CSS (CSS блочная верстка) свойствами конкретного изображения и элементами, расположенными в непосредственной близости.

Вывод изображения осуществляется тэгом IMG, при этом задействуется обязательный атрибут SRC (source или источник). Ниже представлен html код, выводящий одно изображение.

<img src="http://takprostotak.ru/wp-content/uploads/2012/01/images1.jpeg" />

результат работы этого кода, как видно на фото позирует очаровательный представитель семейства кошачьих.

Примечание: Какие тут могут быть трудности? Можно указать неверно путь к изображению, в этом случае браузер ничего не покажет. Скорее всего, вы ошиблись в имени или неверно указали путь к изображению.

Путь может быть абсолютным и относительным. В моем случае используется абсолютный путь: http://takprostotak.ru/wp-content/uploads/2012/01/images1.jpeg. Абсолютный путь всегда начинается с http://адрес_сайта/, далее следует путь к изображению относительно корня сайта (/wp-content/uploads/2012/01/images1.jpeg). Так же абсолютный путь позволяет использовать изображения с других сайтов.

Относительный путь (/wp-content/uploads/2012/01/images1.jpeg), так же часто используется и наиболее предпочтителен, т.к. при смене доменного имени относительные пути по прежнему будут работать.

Рассмотрим основные атрибуты тэга IMG:

  • src - Источник, адрес файла-изображения
  • width - Ширина контейнера под изображение
  • height - Высота контейнера под изображение
  • hspace - отступ по горизонтали от окружающего текста
  • vspace - отступ по вертикали от окружающего текста
  • border - толщина рамки изображения
  • alt - альтернативный текст изображения. Если отключить показ картинок в браузере, то вместо картинок будет показан альтернативный текст.

Пример использования атрибутов тэга IMG:

<img src="http://takprostotak.ru/wp-content/uploads/2012/01/images1.jpeg" width="100" height="100" border="4" alt="Кот на рыбалке"/>

результат (рамка 4пикс., ширина и высота 100пикс. альтернативный текст - "кот на рыбалке"):

кот на рыбалке

Атрибуты width и height рекомендую всегда указывать, даже если они совпадают с истинными размерами изображения. Если эти атрибуты указаны, то браузер резервирует изначально место под изображение в html документе и не дожидаясь загрузки продолжает формировать страницу, а изображение тем временем загружается. В итоге страница быстрее загрузиться.

width и height могут отличаться как в большую так и в меньшую сторону от истинного значения изображения, в этом случае браузер уменьшит/увеличит изображение. Важно понимать, что браузер изменяет изображение не пропорционально, а как вы укажите. Часто можно видеть, как начинающие вебмастера ставят на сайте большие картинки (200кб-2мб) и при этом уменьшают их за счет атрибутов width и height, это плохой стиль, который ведет к тому, что картинки будут выглядеть меньше, чем есть на самом деле, а ваша страница будет дольше грузиться, а пользователь, не дождавшись, уйдет и никогда не вернется. В идеале истинное значение высоты и ширины изображение должно совпадать с атрибутами ширины и высоты тэга IMG или отличаться незначительно. Для показа больших фотографий на сайте существуют фото-галереи, в них изначально представлены миниатюры (уменьшеная копия изображения) по щелчку на которую загружается основное фото во всплывающем окне, эту галерею можно реализовать при помощи любого jQuery плагина, коих достаточно много на любой вкус и цвет.

Рамка и отступы изображения. Выравнивание изображения.


Мы уже рассмотрели пример как при помощи атрибута border задать рамку вокруг изображения, с тем же успехом можно задать рамку через CSS (CSS табличная верстка).

Давайте зададим во круг всех изображений страницы красную рамку шириной 5пикс.

<style type="text/css">
  img { border:5px solid red;}
</style>
<img src="http://takprostotak.ru/wp-content/uploads/2012/01/images1.jpeg" />

В результате получим:

Все изображения на странице будут иметь аналогичную рамку поскольку в CSS используется правило img { border:5px solid red;}, которое применимо ко всем тэгам IMG. В нашем примере таблица стилей располагается непосредственно в html документе, но ее можно вынести в отдельный файл и подключить к документу, это наиболее предпочтительный вариант. В нашем же случае для наглядности html и css коды располагаются в одном файле.

Примечание: Если нужно задать стиль для конкретного изображения или группы, тогда следует использовать CSS классы. Присваиваем нужным изображениям любой класс (<img src="..." class="img_ramka">), а в CSS стилях задаем необходимые свойства для этого класса (.img_ramka { border:5px solid red;}).

Выравниваем изображение по левому краю.

Выравнивать изображения можно по центру, по левому или правому краям. В данном случае изображение выровнено по левому краю. Выровнить изображение можно путем указания CSS свойства float с одним из значений left|right|none|inherit. Также можно указать атрибут align для тэга IMG, значения атрибута left|right|center.

<style type="text/css">
  img {float:left}
</style>
<img src="http://takprostotak.ru/wp-content/uploads/2012/01/images1.jpeg" />

по правому краю

Этот текст обтекает изображение слева, так как в CSS стилях задано свойство для изображений float: right.

<style type="text/css">
  img {float:right}
</style>
<img src="http://takprostotak.ru/wp-content/uploads/2012/01/images1.jpeg" />

Отступы от изображения.

В приведенном выше примере текст обтекает изображение плотно, без отступов. Часто требуется, чтобы текст отступал от изображений на некоторое расстояние, прилипший текст смотрится некрасиво. Давайте зададим отступ текста от изображения в 10 пикселов. За это отвечает CSS свойство margin. margin:10px - означает, что нужно отступить 10 пикселов со всех четырех сторон. Если нужно с каждой стороны задать разные отступы, тогда следует использовать это свойство в другой вариации (margin:2px 3px 4px 5px - задает разные отступы, сверху 2пикс., справа 3пикс., снизу 4пикс., слева 5пикс.).

<style type="text/css">
    img {float:left; margin:10px;}
</style>
<img src="http://takprostotak.ru/wp-content/uploads/2012/01/images1.jpeg" />

Задаем фоновое изображение для html элемента. Делаем изображение кнопкой формы. Как наложить текст на изображение


Часто бывает необходимо использовать изображение в качестве фона для блочного html элемента. На моем сайте фон задается как абстрактная картинка, размноженная по вертикали и горизонтали. Давайте создадим div контейнер с габаритами 200 на 200 пикселов и фоновой картинкой (иконка rss) и заключим его в черную рамку толщиной 4 пикс. Внутри контейнера div расположен текст, в результате мы решили задачу наложения текста на изображение. Если необходимо текст может быть спозиционирован внутри контейнера как угодно и иметь любое стилевое оформление.

Контейнер DIV, может содержать произвольный текст или любой html код. В качестве фона задана картинка (32 на 32 пиксела), которая повторяется по вертикали и горизонтали.
<style type="text/css">
    div.conteiner {background: url(http://takprostotak.ru/wp-content/themes/Ultima/images/rss.png); width:200px; height:200px; border: 4px solid; margin:auto;}
</style>
<div class="conteiner">...</div>

Фоновое изображение задается CSS свойством background: url(...). Как видим фоновый рисунок повторяется и заполняет весь контейнер, это потому что рисунок меньше чем контейнер и в свойстве background не указано о "не размножении" картинки (no-repeat).

Фоновое изображение без повторений
Чтобы фон не повторялся необходимо указать параметр no-repeat свойства background.

В этом контейнере DIV фоновое изображение не повторяется (параметр no-repeat), смещено слева на 50 пикс. и сверху на 20 пикс.
<style type="text/css">
    div.conteiner {background: url(...) no-repeat 50px 20px; width:200px; height:200px; border: 4px solid; margin:auto;}
</style>
<div class="conteiner">...</div>

Фоновое изображение повторяется по оси горизонтали
Если нужно чтобы фоновая картинка размножилась только по оси X, для этого необходимо указать параметр repeat-x свойства background.

В этом контейнере DIV фоновое изображение повторяется только по оси X (параметр repeat-x).
<style type="text/css">
    div.conteiner {background: url(...) repeat-x; width:200px; height:200px; border: 4px solid; margin:auto;}
</style>
<div class="conteiner">...</div>

Фоновое изображение повторяется по оси вертикали
Если нужно чтобы фоновая картинка размножилась только по оси Y, для этого необходимо указать параметр repeat-y свойства background.

В этом контейнере DIV фоновое изображение повторяется только по оси Y (параметр repeat-y).
<style type="text/css">
    div.conteiner {background: url(...) repeat-y; width:200px; height:200px; border: 4px solid; margin:auto;}
</style>
<div class="conteiner">...</div>

Делаем изображение кнопкой html формы. Кнопка-картинка
Стандартно кнопка html формы выглядит как-то так

Чтобы сделать изображение кнопкой необходимо изменить тип поля INPUT на IMAGE и добавить параметр SRC.

<input type="image" src="http://takprostotak.ru/wp-content/themes/Ultima/images/rss.png">

Как сделать изображение ссылкой. Убираем рамку вокруг изображения-ссылки в IE.

Очень часто требуется сделать так чтобы по клику по изображению осуществлялся переход на некую html страницу или другими словами сделать картинку ссылкой, привязать ее к определенному URL. Для этого нужно, всего-навсего заключить изображение в тэг A. Следующая ссылка ведет на главную страницу моего блога:


код:

<a href="http://takprostotak.ru" target="_blank"><img src="http://takprostotak.ru/wp-content/uploads/2012/01/images1.jpeg" alt="" /></a>

Здесь параметр HREF указывает адрес ссылки, а TARGET="_BLANK" говорит о том, что страница должна открываться в новом окне браузера.

Чтобы избежать появления рамки вокруг изображения-ссылки в IE, необходимо задать в CSS стилях общее свойство (a img { border:0;}).

На последок по традиции видео в тему.



Похожие статьи:
↑ Наверх ↑
  • Комментарии

Прокомментировать

Подписаться, не комментируя

Видеоуроки для вебмастеров
  • Рубрики
  • Случайные

Идеальный хостинг