|   |
Web-броузеры поддерживают множество графических форматов, но наиболее часто используются GIF и JPEG (некоторые форматы требуют установки дополнительных программных компонентов броузера).
А что вы знаете о графических форматах ?
Доминирующими графическими форматами в Internet являются GIF и JPEG.
Оба формата обладают специфическими особенностями, что и определяет область их применения.
|
Для вставки изображения в документ используется одиночный тег <IMG>. Местоположение изображения на странице и его выравнивание относительно текста задается следующими атрибутами:
Примеры тега <IMG>:
<IMG SRC="pic1.gif" ALIGN=MIDDLE>
<IMG SRC="pic2.jpg" HSPACE=20 VSPACE=20 ALT="Здесь изображение офиса нашей компании">
<IMG SRC="pic3.jpg" WIDTH=120 HEIGHT=160 ALIGN=LEFT BORDER=5>
Закрепим на примере использование графики в ваших документах:
Пример 4. Использование графики. [просмотр примера в окне]
<HTML>
<HEAD>
<TITLE>Все графическое: элемент-якорь, линия-разделитель, фон и содержимое</TITLE>
</HEAD>
<BODY BACKGROUND="bgp.gif", BGCOLOR ="WHITE", TEXT="BLACK", LINK="BLUE", ALINK="RED", VLINK="NAVY">
<H1 ALIGN=CENTER>Два вида обезьян</H1>
<P ALIGN=CENTER><IMG SRC="bar.gif" WIDTH="50%">
<P ALIGN=CENTER><IMG SRC="monkey.gif" ALT="GIF"> & <IMG SRC="monkey.jpg" WIDTH=182 HEIGHT=122 ALT="JPG">
<H2 ALIGN=CENTER>GIF обезьяна & JPEG обезьяна</H2>
<P ALIGN=CENTER>
GIF обезьяна похуже качеством, но зато живая.<br>
JPG обезьяна красивая, но глазами хлопать не умеет.
<P>
<P ALIGN=CENTER><IMG SRC="bar.gif" WIDTH="50%">
<P ALIGN=CENTER>© 2001 <A HREF="mailto:myname@mail.ru">
<IMG SRC="mbox.gif" BORDER=0 ALT="[ почта ]"></A> Вебмастер.
</BODY>
</HTML>
Приведем несколько рекомендаций по использованию графики:
Как я уже говорил выше
Но существует еще один важный вариант использования изображений для ссылок - так называемые "карты ссылок" (imagemap). Типичным примером использования карт ссылок являются сервера крупных международных корпораций, где выбирая государство на изображении карты мира, вы получаете документ с соответствующей вашему выбору языковой и сервисной поддержкой. Карты ссылок бывают двух видов: обрабатываемые клиентом и обрабатываемые сервером.
Не будем подробно рассматривать карты ссылок обрабатываемых сервером (тут вам не учебник по CGI-программированию, купите и читайте), но основные элементы этой технологии рассмотрим.
1. Создаем изображение - карту ссылок (например, сканируем политическую карту мира).
2. Создаем файл определения карты ссылок. Данный файл (расширение MAP) содержит описание связи непересекающихся областей изображения с ссылками на ресурсы Internet. Map-файлы бывают двух форматов CERN и NCSA, а их поддержка определяется используемым Web-сервером.
Файлы формата CERN представляют собой набор записей вида:
ТипОбласти (x1, y1) ... URL
...
ТипОбласти (x1, y1) ... URL
Файлы формата NCSA представляют собой набор записей вида:
ТипОбласти URL x1, y1, ...
...
ТипОбласти URL x1, y1, ...
Типы областей задаются относительно размера изображения (а не относительно окна броузера), используемого в качестве карты ссылок, и бывают следующих типов:
Default | Область, связанная с которой ссылка, активизируется при выборе пользователем области изображения без описания. Не требует задания координат. |
Rect | Прямоугольная область изображения. Задается двумя парами координат (левый-нижний, правый-верхний). |
Poly | Многоугольник (до 100 вершин). Координаты первой и последней вершины должны совпадать. |
Point | Точка на изображении. Задается координатами точки. |
Circle | Круг на изображении. Задается координатами центра круга и значения (NCSA-точка на окружности/CERN-радиус) |
3. Создаем CGI-сценарий (Common Gateway Interface). Это программа
4. В HTML-документе указываем ссылку на map-файл определения, а в качестве элемента-якоря задаем файл изображения карты ссылок. Например:
<A HREF="httр://www.mysite.ru/cgi-bin/mapdef.map"><IMG SRC="map.gif" ISMAP></A>
Начиная с HTML 3.2, появилась возможность создавать карты ссылок, обрабатываемых клиентом т.е. броузером. При этом файл описания хранится в документе и задается при помощи специальных тегов, следующего формата:
<MAP NAME="имя карты ссылок">
<AREA SHARE="тип области 1" COORDS="x,y..." HREF="URL"/NOHREF>
...
<AREA SHARE="тип области N" COORDS="x,y..." HREF="URL"/NOHREF>
</MAP>
<IMG SRC="map.gif" USEMAP=#имя карты ссылок>
Пример определения карты ссылок:
<MAP NAME=map1>
<AREA SHARE=RECT COORDS="0,0, 50,100" NOHREF> <!-- мертвая зона -->
<AREA SHARE=RECT COORDS="51,0, 100,100" HREF="page1.htm">
</MAP>
<IMG SRC="map.gif" USEMAP=#map1>
Ну хватит, наверное про карты ссылок, тем более, что не каждый броузер их понимает.
  |   | |
Ваши вопросы и замечания прошу направлять dmitriy_v_k@hotmail.com
© 2001 Дмитрий Красюк
Дата последней модификации: Пятница Март 30, 2001.