картинки в html

Изображения в HTML

Первым браузером считается Mosaic (хотя на самом деле первым был WorldWideWeb, именно от этого браузера идут исторически три буквы ‘www’). Чем был уникален Mosaic? Это был первый браузер, который отображал картинки. Картинки для веба должны обладать одной главной особенностью, они должны сжимать информацию, т.к. информация в каждом пикселе слишком большая по размеру. Т.е. любой формат для хранения картинок должен обладать каким-то сжатием. Такими форматами являются: GIF, JPEG, PNG.

Формат GIF

Недостаток этого формата — картинка может хранить в себе только 256 цветов (из палитры RGB). А если в картинке больше 256 цветов? Тогда графический редактор берет самые часто используемые цвета и строит из них палитру gif. Те цвета, которые не вошли в эту палитру, получаются с помощью смешивания пикселей тех самых базовых цветов.

Плюсы формата gif:

  • Внутри формата gif можно сделать много картинок, т.е. использовать gif как контейнер для других картинок gif. Получаются анимированные картинки.
  • Есть возможность указать для любого пикселя прозрачность или непрозрачность.

Формат JPEG

Ассоциация американских фотографов предложила формат для передачи полноцветных изображений. Соответственно в формате jpeg тоже используется алгоритм сжатия, но он специфичен: он работает с матрицей 8×8 пикселей. Т.е. разбивает всю картинку на части 8×8 пикселей и описывает эти области по своим законам.

Формат jpeg всегда искажает качество оригинала, т.е. невозможно передать оригинал с теми же пикселями в формате jpeg. Это всегда будут разные картинки. Степени искажения можно убавлять (при этом увеличивается размер картинки).

Формат PNG

Юридически форматы gif и jpeg принадлежат компаниям, т.е. они не свободные. Поэтому возникла необходимость создать формат, который разрабатывался всеми, а не только отдельными компаниями, и все могли участвовать в разработке каких-то нововведений в такой формат. И появился открытый формат png.

Этот формат содержит 3 разновидности:

  • PNG-8 — используется для замены формата gif. 8 — это глубина цветности, максимум — 256 цветов. Но в нем нет анимации. Сжатие гораздо лучше, чем у формата gif.
  • PNG-24 — для замены формата jpeg. Не искажает оригинал картинки (в отличие от jpeg), т.е. делает пиксель-в-пиксель.
  • PNG-32 — позволяет задать любой пиксель с 256 степенями прозрачности (глубина цветности). Здесь используются три канала RGB + специальный альфа-канал. Все современные мониторы и операционные системы поддерживают эту технологию.

Вывод картинки на экран

Существует 2 способа:

  • Картинка как файл, используем тег ‘img’.
<img src="имя_файла">
<img src="img.gif">
<img src="http://site.ru/pic/img.gif">
  • Картинка как ссылка.
<img src="glbus.gif">
<a href="#"><img src="glbus.gif"></a>

У картинок можно указать высоту и ширину (height и width) выводимой области, рамку с помощью атрибута border, выравнивание top(слева, справа, по центру), атрибут alt (когда изображение не выводится в браузере, вместо картинки выводится эта надпись), название с помощью title (выводится подсказка при наведении мышкой):

<img src="img.gif" alt="это картинка" width="100" height="150">
<img src="img.gif" alt="это картинка" border="3">
<img src="img.gif" title="это картинка" align="top">

Фоновые картинки

Для этого используем атрибут backgroung в теге ‘body’. В атрибуте указываем путь к картинке:

<body background="fon.gif">

Карта изображений, или картинка для навигации

Есть картинка. Мы хотим использовать ее для навигации, т.е. сделать кликабельные области на картинке (задаются по координатам). Чтобы мы кликнули, и открылся какой-то документ. Это делается с помощью элемента map. Поверх нашей картинки мы кладем невидимый элемент map. Для этого связываем картинку с элементом map.

<img src=img.gif usemap="#map1">
<map name="map1">
<area shape="circle" coords="57,45,30" href="file1.html">
</map>

Можем задавать формы в элементе area shape:

  • rect — прямоугольник.
  • circle — окружность.
  • poly — многоугольник.
  • default — оставшаяся область.

Атрибут cords — это координаты. Для прямоугольника первые 2 цифры — координаты левого верхнего угла, вторые 2 цифры — правого нижнего угла. Для круга — первые 2 цифры — координаты центра, третья цифра — радиус. Для многоугольника — каждые 2 цифры — это координаты очередного узла.




Добавить комментарий

Ваш e-mail не будет опубликован.