Изображения в HTML. Вставляем графический файл на web-страницу

-
• , создающие списки.
• shape - атрибут тега , задающий форму ссылки. Активная область может иметь форму прямоугольника, многоугольника или круга.
• cords - определяющий координаты области атрибут. Также принадлежит тегу . Для прямоугольника указываются координаты левого верхнего и правого нижнего углов, для многоугольника - координаты вершин, определяя круг, необходимо задать координаты его центра и радиус.
• usemap - атрибут тега img , который связывает изображение с картой. Благодаря ему браузер понимает, что в контейнере описана карта именно этого рисунка.

Пример карты изображения

Чтобы было понятно, как всем вышеперечисленным пользоваться, приведу элементарный пример. Есть рисунок map.jpg . Его нужно разделить на две активные области. Щелчок на верхней части (зелёный цвет) откроет сайт «Одноклассники», нижняя же часть (синий цвет) будет вести на «ВКонтакте». Ссылки должны открываться в новой вкладке. Для создания карты выполняем следующие шаги.

1. Вставляем изображение на страницу и привязываем его к будущей карте (она будет называться social), для чего пишем следующий код:

2. Определяем на картинке будущие активные области и соответствующие им координаты. Это можно сделать в Paint, Photoshop или любом другом графическом редакторе. В нашем случае всё элементарно: прямоугольники равны и по высоте (114 пикселей) и по ширине (384 пикселя).

3. Начинаем создавать карту: открываем тег и прописываем в атрибуте name её название, которое обязательно должно совпадать со значением свойства usemap самой картинки:

4. С помощью тегов area определяем активные области:

5. Закрываем карту:

Итогом работы стала картинка, щелчок на разных частях которой ведёт к открытию разных социальных сетей, и вот такой HTMLкод:

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

Путешествуя по Интернету Вы конечно же видите на многих сайтах различные картинки, баннеры, фотографии, графические изображения. Сегодня мы научимся вставлять изображения на HTML страницу.

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

При подготовке изображений следует учесть несколько моментов.

1. Поскольку веб-страница загружается по сети, существенным фактором выступает размер ("вес") графического файла , встроенного в web-документ. Чем он меньше, тем быстрее отобразится изображение.

2. Довольно часто физические размеры изображения (ширину и высоту) необходимо ограничить (уменьшить) по ширине и высоте. Например, установить по ширине не более 700-800 пикселов. Иначе изображение целиком не поместится в окне браузера, и появятся полосы прокрутки.

Форматы графики для web-сайтов

Наиболее широкое распространение для веб-графики получили два основных формата: GIF и JPEG . Такие качества как: многофункциональность, универсальность, небольшой объем исходных файлов при достаточном хорошем качестве, сослужили этим форматам хорошую службу, фактически определив их как стандарт для веб-изображений.

Есть еще формат: PNG , который также поддерживается браузерами при добавлении изображений и существует в двух вариантах: PNG-8 и PNG-24 . Однако популярность формата PNG сильно уступает по признанию форматам GIF и JPEG .

Обычно для изображений (картинок) создают отдельную папку в корневом каталоге и в неё складывают все изображения для сайта. Иногда таких папок бывает несколько (если того требует структура сайта или Вам так проще ориентироваться). Эту папку чаще всего называют: img или images (изображения ). В коде web-страницы прописывают полный путь до графического файла (где лежит изображение), а также имя данного файла (картинки), который Вы хотите вставить в html-документ.

Пишем код для вставки картинки на web-страницу

Для вставки изображений в HTML документ используется конструкция, указанная в Листинг 8.1. Данный код вставляется в нужное место web-страницы (туда, где Вы хотите видеть картинку).

На нашей we-странице, посвященной автомобилям, я подготовил и вставил два изображения. Код вставки первого изображения Вы видите в Листинге 8.1.

Листинг 8.1.

Вот так будет выглядеть первое вставленное изображение на web-странице сайта:

А теперь прокоментирую подробнее то, что написано в Листинге 8.1.

Само изображение "вставляется" с помощью тега: img src . Полностью запись выглядит вот так: img src="img/mers1.jpg" , где "img/mers1.jpg" – указывает, что наша картинка лежит в папке: img , а имя графического файла (картинки): mers1.jpg .

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

Давайте рассмотрим дополнительные параметры:

border="0" – указывает, что рамки вокруг изображения нет, попробуйте поменять 0 на другое число, например на 1 , - соответствует толщине рамки вокруг изображения в 1 пиксель, 2 – соответствует толщине рамки вокруг изображения в два пикселя и т.д.

Важно! Если Вы планируете сделать изображение ссылкой, обязательно указывайте значение: border="0" .

width="400" – указывает, что ширина изображения составляет: 400 пикселей (ставьте реальную цифру ширины ваших изображений).

height="209" - указывает, что высота изображения составляет: 209 пикселей (ставьте реальную цифру высоты ваших изображений).

Если не указать параметры: width и height , то изображение может получить геометрические искажения.

hspace="20" – указывает на отступ текста вокруг изображения в 20 пикселей.

align="left" – это уже знакомый Вам тег….. Правильно, обозначает выравнивание по левому краю, также может принимать, значение: right - выравнивание по правому краю.

alt="Вид машины спереди" – здесь прописывается альтернативный текст, который высвечивается при наведении мышки на изображение.

Точно таким же образом мы "вставим" на web-страницу и второе изображение, с той лишь разницей, что выравнена оно будет по правому краю.

Комментарии к этой статье (уроку):

Скажите пожалуйста, где именно надо создать папку img?

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

Дело в том, что картинка не отображается, только надпись. В чем может быть дело? Спасибо.

Посмотрите внимательно Листинг 8.1 выше. Возьмите его целиком к себе. В корневом каталоге (там где лежат все HTML-файлы вашего сайта) сделайте папку img . Поместите в эту папку все ваши изображения. В листинге измените mers1.jpg на название фашего файла. Значения width и height так же поменяйте на реальные размеры вашего файла. Удачи.

Спасибо большое, все получилось.

Здравствуйте.У меня таже ситуация,что и предыдущего оратора:прописываю код как у вас,меняю только название файла:вместо mers.1/jpeg вставляю связку мерседес/jpeg.На странице появляется только окно с надписью сверху"Вид автомобиля спереди",а изображения нет.По моему,браузер не может найти путь до фото или он не правильно прописан.ВОТ МОЙ КОД: б

Посмотрите внимательно на свой код img/мерседес/jpeg. Вы правильно поняли браузер не находит путь до графического файла. 2. Неправильно указано имя файла, смотрите как у меня mers1.jpg

Ну вот я скопировал код вставил у меня овал без картинки в овале в верху написана сылка!

Здравствуйте!Проблема такая же, создала папку с названием img там же где и документы сайта, в этой папке сохранены изображения с названием 1.jpg, прописываю все как на вашем примере.

Если Вы заметили у меня картинка лежит в папке img

Очень полезная статья для начинающих "web-мастеров". Единственное замечание к атрибуту "alt". Применительно к рисунку в статье даётся такое его толкование: "alt="Вид машины спереди" – здесь прописывается альтернативный текст который высвечивается при наведении мыши на картинку." Не совсем точно: для рисунка - это прорегатива атрибута title. alt - альтернативный текст, который отобразится, если у пользователя графика отключена или картинка не загрузилась; title - атрибут, позволяющий отображать всплывающее пояснение к картинке при наведении на неё курсора.

вот мой код ТАК ПОЧЕМУ ЖЕ КАРТИНКА СТАВИТСЯ СБОКУ, КОГДА ЗАДАЧА ДЛЯ НЕЕ CENTER?

А если я возьму изоброжение с чужого сайта это не будет нарушением авторских прав?

Объясните, почему при выкладке HTML документа на сервер на месте изображений пустые места в рамке. Хотя до выкладки, изображения были, как надо.

Дмитрий, чудес не бывает, Вы где-то допустили ошибку, проверьте все пути до картинок, т.е. как прописаны картинки в коде.

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

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

Эльвира, Ваше письмо я прочитал, как впрочем и все остальные комментарии и письма. Но отвечать то куда... на деревню дедушке???

не знаю почему у всех запара!? нужно просто коды не копировать-затем вставлять, а самим прописывать и усе будет работать..вот текст моей картинки

Скопировал Ваш листинг,вставил свои значения-картинка есть.Далее вбиваю ниже то же самое(вручную)картинки нет-что за чудо?

АндрейК пожалуйста скажите где ошибка? сколко пробывал не получается((