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

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

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

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

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

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

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

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

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

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

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

< img src='goat.jpg' align= 'left' vspace='15' hspace= '30' >

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

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

< img src='goat.jpg' width ='625' height ='450' >

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

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

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

< img src='goat.jpg' width ='500' height = '360' border = '5' >

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

< a href='megasellmag.ru' >< img src='images/opana.jpg' width='250' height='250' >< /a >

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

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

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

< img src='Quad_Band_Phone.jpg' width='145' height='126' alt='Мобільні телефони' usemap='#phones' >

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

< img src='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'>

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

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

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

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