ПОШУК

Менеджер зображень - тег img

Картинка не просто так вставляєтьсябезпосередньо в текст. Браузеру повідомляють її ім'я і вказують, де і як розташувати на екрані. Для цього використовують одинарний HTML-тег img. Він задає місце розташування графічного об'єкта на веб-сторінці.

Якщо багато атрибутів для тегів в принципі не обов'язкові, то тег img повинен володіти принаймні одним параметром - адресою малюнка. Цей атрибут називається src:

  • <Img src = "/ images / goat.jpg"> - в цьому місці з'явиться файл goat.jpg, який зберігається в поточній директорії;
  • <Img src = "/ images / http: megasellmag.ru/design/images/Shape5.png"> - з таким параметром тега img браузер завантажить зображення, викладене в інтернеті на сайті megasellmag.ru.

атрибути вирівнювання

Для позиціонування зображень на сторінці за допомогою HTML якраз і служить тег img, атрибути якого відповідають за розміщення картинки на сторінці і характер її обтікання текстом.

тег img

За замовчуванням браузер має зображення в центрі екрана, а текст його НЕ обтікає. Тег img дозволить висловити свою незгоду з браузером за допомогою атрибута align (вирівнювання).

<Img src = "/ images / goat.jpg" align = "left"> - малюнок розташується біля лівого краю сторінки, а текст обійде його справа.

Аналогічним буде поведінка тексту, якщо картинку розташувати праворуч (align = right), посередині (align = middle), зверху (align = top), внизу (align = bottom) і по центру (center).

Параметри відступів і розмірів

Щоб текст не заповзав на картинки, тег img обзавівся спеціальними атрибутами -hspace (horizontal / горизонтальні поля) і vspace (vertical / вертикальні поля), що визначають величину відступів тексту від країв зображень в пікселях.

<Img src = "/ images / goat.jpg" align = "left" vspace = "15" hspace = "30">

тег img атрибути

Картинка не тільки слухняно віддалиться від тексту на зазначену величину, а й відсунеться від краю сторінки, так що краще уникати великих відступів.

Дуже важливі геометричні розміри зображень,які не тільки бажано, але іноді просто необхідно вказувати для коректного відображення картинки. Для цього служать атрибути width (ширина) і height (висота), значення яких задають в пікселях або відсотках.

<Img src = "/ images / goat.jpg" width = "625" height = "450">

Якщо вказати тільки ширину, висота будепідібрана автоматично з вихідними пропорціями. Розміри, задані у відсотках, дозволяють розташувати зображення в потрібній частині сторінки, незалежно від розміру вікна браузера, а така необхідність виникає нерідко.

Інші параметри

Атрибут border укладає картинку в рамку зазначеної товщини, чого не робить за замовчуванням браузер.

<Img src = "/ images / goat.jpg" width = "500" height = "360" border = "5">

Рамка може мати і, здавалося б, безглуздунульову товщину (border = "0"), але це до тих пір, поки картинка не стане посиланням, коли браузер автоматично обведе її синьою рамкою, не чекаючи вказівок.

<A href = "megasellmag.ru"> <img src = "/ images / images / opana.gif" width = "250" height = "250"> </ a>

Деякі нетерплячі користувачі, розлюченінизькою швидкістю інтернету, просто відключать показ картинок. Ось для таких випадків передбачений параметр alt, що дозволяє ввести альтернативний текст, який побачить користувач в квадратику, куди поспішає завантажитися зображення.

Якщо не влаштовують можливості параметра alt, тег img може запропонувати атрибут longdesc, як значення якого використовують URL-адресу документа з більш детальним описом.

Атрибути usemap і ismap вказують браузеру, щозображенням буде малюнок, на якому гіперпосиланнями є окремі області (карта посилань), тільки параметр usemap визначає навігаційну карту на сервері, а ismap - карту на стороні клієнта.

<Img src = "/ images / Quad_Band_Phone.gif" width = "145" height = "126" alt = "Мобільні телефони" usemap = "# phones">

Опис посилання 1 на малюнку нижче:

<Img src = "/ images / img / map.jpg" width = "328" height = "236" border = "0" usemap = "# Dvostok"> <map name = "Primorye">

<Area shape = "rect" coords = "60,20,110,50,105,80,35,80" href = "Lsd022_1.html" target = "_ blank" alt = "Lesozavodsk">

html тег img

екзотичні елементи

Атрибут lowsrc наказує браузеру завантажити впершу чергу копію (або іншу альтернативу) вихідного зображення з більш низькою якістю і, відповідно, більш "легку". Це хитрощі передбачено на випадок низької швидкості інтернету у користувача. Оригінал, завантажившись, замінює "підробку".

Не так часто використовуваний атрибут galleryimg тегаimg викликає панель управління зображенням (якщо навести на нього курсор), дозволяючи відкрити стандартну папку "Мої малюнки" і роздрукувати, зберегти або відправити картинку електронною поштою. Відключити панель можна, вказавши параметру galleryimg значення no / false, а включити, встановивши yes / true.

У новій специфікації HTML5 у ряду тегів застаріли деякі параметри. Так, у img атрибути lowsrc, border, longdesc і name відправлені у відставку.</ Strong </ p>

  • оцінка: