|
Страница 7 из 11
Форматы
GIF
Это наиболее часто используемый во Всемирной паутине формат (Graphical Interchange Format). Точное название – GIF89A. Он был разработан для сети CompuServe. После ряда усовершенствований он приобрел много важных свойств, включающих:
- Сжатие данных без потерь.
- Поддержку прозрачного фона, т. е. возможность создания изображений с прозрачными участками.
- Чересстрочный вывод на экран, что дает возможность рассмотреть изображение до конца загрузки.
- Поддержку большинством программ просмотра.
Примечание:
Этот формат, как и некоторые другие, использует алгоритм сжатия LZW, запатентованный компанией Unisys. В конце 1994 года эта компания объявила, что любому разработчику программных продуктов, использующих формат GIF, впредь будет требоваться лицензия от Unisys. Это требование касалось только разработчиков и не затрагивало конечных пользователей. В специальном заявлении компания также уточнила, что использование GIF в WWW допустимо и не нуждается в лицензировании.
Другим популярным форматом для графики является JPEG. Он был создан группой экспертов в области фотографии (Joint Photographic Experts Group) в результате разработки стандартного метода сжатия фотографических изображений "с потерями". Ниже кратко перечислены основные свойства формата:
- Сжатие происходит "с потерями", поэтому изображение теряет некоторые (несущественные) детали.
- Размер файла сжатого изображения, как правило, меньше, чем в случае GIF, т.е. файл передается быстрее.
- Поддержка 16,7 миллионов цветов, что обеспечивает очень хорошее качество цветопередачи.
- Потеря деталей вокруг четких контуров (дрожание линий), что делает формат непригодным для передачи изображений с высокой четкостью и текста.
PNG (произносится "пинг")
Этот формат (Portable Network Graphics) был разработан в 1995 году, чтобы прийти на смену формату GIF после действий Unisys по защите авторских прав на алгоритм сжатия LZW. Одновременно были переработаны некоторые технические характеристики, в частности, улучшено сжатие и увеличено количество поддерживаемых цветов. В настоящее время распространяются подключаемые программные модули для браузеров Netscape Navigator и Microsoft Internet Explorer, позволяющие использовать формат PNG.
ВМР
Этот формат (bitmap) широко используется операционными системами Windows и OS/2. Файлы в этом формате хранятся без сжатия и поэтому требуют много времени при загрузке. Поддерживается только программой Microsoft Internet Explorer. Не рекомендуется использование этого формата.
Для вставки в текст картинки используется одиночный тег <IMG SRC="адрес графического файла"> с одним обязательным атрибутом SRC. Адрес задается так же, как и адрес ссылки.
|
имя атрибута
|
возможные значения
|
описание
|
примечания
|
|
SRC
|
URL
|
адрес изображения
|
обязателен
|
|
ALT
|
строка
|
текстовое описание изображения
|
|
|
ALIGN
|
TOP, MIDDLE, BOTTOM, LEFT, RIGHT
|
позиционирование изображения относительно текущей текстовой строки
|
- TOP –позиционирует верх изображения с верхом текущей текстовой строки.
- MIDDLE
- выравнивает середину изображения по основной текстовой строке.
- BOTTOM
(по умолчанию) –выравнивает низ изображения по основной строке.
- LEFT
– перемещает изображение к текущему левому краю, временно изменяя этот край так, чтобы последующий текст переместился вдоль правой стороны изображения.
RIGHT – перемещает изображение к текущему правому краю.
|
|
HEIGHT
|
целое
|
высота в пикселях
|
|
|
WIDTH
|
целое
|
ширина в пикселях
|
|
|
BORDER
|
целое
|
ширина бордюра (рамки) в пикселях
|
используется, когда элемент IMG появляется, как текст якоря; используйте BORDER=0 для подавления рамки
|
|
HSPACE
|
целое
|
ширина незаполненного пространства непосредственно слева и справа от изображения в пикселях
|
|
|
VSPACE
|
целое
|
высота незаполненного пространства выше и ниже изображения в пикселях
|
|
|
USEMAP
|
URL
|
фрагмент идентификатора для сайта клиента с картой образа
|
карты определены элементом MAP; имена карт - чувствительны к регистру набора символов
|
|
ISMAP
|
|
показывает, что изображение является картой образа, реагирующей на нажатие клавиши мыши
|
когда пользователь "кликает" на изображении, этот атрибут обеспечивает передачу координат курсора серверу
|
Атрибуты WIDTH и HEIGHT при совместном использовании позволяют программам просмотра зарезервировать место на экране для изображения еще до того, как они будут переданы по сети. Это позволяет пользователю начать чтение, пока передача данных еще продолжается. Эти атрибуты не предназначены для автоматического изменения размера изображения броузерами. Хотя некоторые броузеры могут масштабировать изображение в соответствии с атрибутами WIDTH и HEIGHT, не полагайтесь на это. Таким образом, они должны задавать реальный размер изображения.
Что касается ISMAP, приведем пример того, как можно его использовать:
<a href="//vbizsoft.kg/sitemap.html"><img src=navbar.gif ismap border=0></a>
Нажатые координаты передаются серверу. Броузер извлекает новый URL из URL, специфицированного атрибутом HREF, с добавлением знака вопроса (?), координаты x, запятой (,) и координаты y локализации (координаты выражены в пикселях). Связь следует с использованием уже нового URL. Например, если пользователь нажал на участок с x=10, y=27, формируемый URL будет: "/cgibin/navbar.map?10,27" В целом, это хорошая идея для подавления бордюра (использование атрибута BORDER=0) и обозначения того, что изображение реагирует на нажатие клавиши мыши.
Примеры
<IMG SRC="Yucca. JPG" ALT=" Picture of Yucca" WIDTH=110 HEIGHT=168>
<P> <IMG SRC="Yucca.jpg" ALT=" Pic Yucca" WIDTH=110 HEIGHT=168 ALIGN=RIGHT>
This is a simple example of embedding images.
</P>
Используйте IMG с ISMAP, чтобы создать реагирующую на нажатие клавиши мыши карту:
<A HREF="http://vbizsoft.kg/imagemap/english.map">
<IMG HEIGHT="400" WIDTH="400"
SRC="http://vbizsoft.kg/Pictures/english.gif"
ALT="Helsinki University of Technology" ISMAP>
</A>
Примечания
Если Вы хотите, чтобы изображение появилось справа или слева от текстового абзаца, Вы должны расположить элемент IMG в начале абзаца (P элемент). Однако при этом результат может Вас не устроить. Поэтому хорошей практикой стало иметь элемент BR с атрибутом CLEAR в конце такого абзаца.
Не стоит перегружать свои страницы графикой, из-за того, что файлы большого размера медленно передаются по сетям. По этой же причине, фотографии объектов живой природы лучше хранить в формате *.jpg, а рисованные, или чертежи с небольшим числом цветов - в *.gif.
|
