Файл: Уроки HTML.docx

Создание изображения-карты

Поскольку клиентские изображения-карты намного проще создавать и применять, серверные изображения-карты еще существуют на устаревших узлах. Теперь настало время создавать шаг за шагом свои изображения-карты. Ниже описывается процесс создания и ввода главным образом клиентского изображения-карты.

Вы узнаете, как выбирать подходящее изображение, соотнести его различные фрагменты с разными HTML-файлами и ввести необходимые теги в веб-страницу.

Как найти подходящее изображение

Первый шаг при создании изображения-карты - поиск подходящего изображения. Когда посетители увидят картинку, им должно быть сразу понятно, что она состоит из нескольких фрагментов и каждый из них представляет собой ссылку на разные документы. Выбирать надо понятные для посетителей изображения, фрагменты которых хорошо разграничены на экране, или хотя-бы отделены от основного фона. Я ухожу придумывать картинку... [через 10 минут]. Вот что значит хорошее настроение, соответсвенно вдохновение. Смотрите:

Пока это только картинка int.jpg. Изображения-карты можно создать практически из любого графического рисунка - пиктограммы, кнопки, линейки и т.д., если разбить его на фрагменты и представить в качестве изображения-карты; но это, как говорится, извращение... Типично изображения-карты - что-то подобное тому, что я нарисовал.

Сначала, чтобы ввести вас в курс, я расскажу обо всем по порядку. 1я пиктограмма - это будет "серфинг", 2я - "мотоциклы", 3я - "статистика", 4я - "животные", 5я - "экология и география", 6я - "фотографии", 7я - "заработки в сети", 8я - "театр", 9я - "просвещение", 10я - "обмен". Предупреждаю, мне это никак не соответствует... скорее я перечислил здесь то, что мне полностью противоречит ;).

Картинки людей и животных не так уж плохи в качестве изображений-карт, если вы уверены, что посетители поймут: при клике на разных фрагментов (например, различных частях тела) они попадут на различные веб-страницы. Отличный пример использования изображений-карт для этой цели изображения человека (в нашем случае скелета) вы найдете тут.

Планирование карты

Ваше следующее действие - разбить выбранное изображение на фрагменты и определить, как будет работать изображение-карта.

В нашем примере с "интересами" каждый кубик должен служить ссылкой на определенную страницу.

Если вы определили, как разбить изображение-карту на фрагменты, можно перейти к следующей стадии - введению необходимых тегов в код веб-страницы.

Создав изображение-карту, важно помнить, что теперь вы работаете с несколькими веб-страницами. Вы прокладываете пути, по которым посетители будут изучать различные аспекты вашего узла.

Помещение изображения на веб-страницу

Итак, о новых тегах HTML, поддерживающих клиентские изображения-карты. Ввод в код страницы изображения-карты очень похож на ввод обычного изображения, понадобится только новое ключевое слово и пара новых тегов. Но если вы не хотите изучать эти тонкости HTML, можно этого и не делать. Есть полезное средство, позволяющее избежать этой работы.

Если вы хотите сами ввести необходимый фрагмент HTML, сначала поместите изображение на веб-страницу и с помощью тега <img> и ключевого слова USEMAP. <img src="int.jpg" usemap="#interests">

Этот тег дает указание браузеру вывести на веб-странице файл int.jpg. Слово USEMAP сообщает браузеру, что это изображение является изображением-картой, и дает ему указание найти в документе именной раздел под названием "interests". В этом именном разделе описывается, как интерпритировать клики мышью на различных координатах изображения.

Значок # очень важен, благодаря ему браузеры распознают именные ссылки внутри файла.

Разбиение изображения на фрагменты

После того как изображение помещено на веб-страницу, настало время графически на нем задать каждый фрагмент. Представьте себе, что изображение ненесено на большой лист миллиметровки, на котором вам необходимо определить точные координаты X и Y для каждого фрагмента, соответствующего ссылке на HTML-файл. Координаты изображения измеряются в пикселах (точка, характеризующая разрешение монитора). Чтобы каждый фрагмент правильно связать с определенным HTML-файлом, его координаты необходимо задать в пикселах.

К счастью, существует ряд удобных средств, облегчающих задание фрагментов для изображений-карт. Одно из удобнейших средств - это программа MapThis!. Она бесплатна, и загрузить ее можно с этого узла.

Сейчас я по шагам расскажу как создать карту через эту программу, кому интересно, могу объяснить как это сделать другими способами. Пишите.

1. Запустите MapThis!. Появится пустой экран.

2. Чтобы создать изображение-карту с нуля, выберите команду File -> New (Файл -> Создать). Появится диалоговое окно Make New Image Map (Создание нового изображения-карты).

3. Открывается диалоговое окно Open Existing Image File (Открыть существующий графический файл). Здесь задается та картинка, из которой делается изображение-карта.

4. Выберите ту картинку, которую вы хотите редактировать, затем нажмите кнопку Open (Открыть). Изображение появится на экране.

5. После того как исходное изображение открыто, на нем можно задать фрагменты трех форм: прямоугольные, круглые и многоугольные. Щелкните на кнопке, соответствующей той форме фрагмента, которую вы хотите задать, а затем изобразите форму на экране с помощью мыши. Нам понадобиться прямоугольная форма.

6. Очертите на изображении все необходимые фрагменты. В нашем примере задано десять различных фрагментов, по одному на каждый кубик.

7. Теперь щелкните на панели инструментов на пиктограмме Show/Hide Area List (Показать/убрать список областей). Появится диалогое окно Area List (Список областей).

8. Выберите одну из перечисленных областей и нажмите пиктограмму Edit (Редактировать). Появится диалоговое окно Settings (Параметры). В этом окне наберите URL того файла, на который будет ссылаться выбранный вами фрагмент. После этого нажмите OK.

9. Повтортие шаг #8 для каждого из фрагментов, заданных на изображении. Когда вы закончите, в диалоговом окен Area List для каждого фрагмента будет выведен соответствующий файл, на который осуществляется ссылка.

10. Выберите команду меню File -> Save (Файл -> Сохранить). Появится диалоговое окно Info about this Mapfile (Информация о даннм файле разбивки).

11. Введите название изображения-карты и установите переключатель формата на CISM. Помните, что CISM означает клиентское изображение-карту. Здесь вы можете также задать URL, на который произойдет переход, если посетитель щелкнет на изображении за пределами заданных вами фрагментов.

12. Закончив устанавливать параметры изображения-карты, нажмите OK; программа MapThis! подскажет, чтобы вы сохранили клиентское изображение-карту в HTML-файле.

13. Вы успешно задали изображение-карту. Теперь остается только добавить HTML-код в ваш документ (лучше сразу после тега <img>), и все. Таким образом, вы создали ваше собственное изображение-карту.

Итог занятия

На этом уроке мы начали разговаривать об изображениях-картах. Узнали как они работают, прочитали немного об истории изображениях-картах, научились создавать свои изображения-карты. Если у вас есть вопросы по пройденному материалу, присылайте их сюда.

Уроки html'а. Урок # 15.

Формы фрагментов изображения

Скорее всего, вы будете создавать изображения-карты с помощью программы типа MapThis!. Тем не менее, в данном разделе описан процесс создания изображения-карты вручную. Это поможет вам понять действие всех тегов, использованных в предыдущем разделе.

Следующим шагом после задания на веб-странице тега изображения будет ввод тегов <map> и </map>: <map name="interests"></map>

Это новые теги HTML, сообщающие браузеру, на что ссылаться из фрагментов изображения-карты. Проверьте, чтобы значение, присваемое NAME, точно совпадало со значением, ранее заданным USEMAP. Иначе браузер не сможет верно интерпритировать ссылки изображения-карты.

Тег <map> означает, что следующий за ним фрагмент HTML-файла описывает работу каждого фрагмента изображения-карты.

Между тегами <map> и </map> вводятся теги <area> для каждого из фрагментов, ссылающихся на другие HTML-файлы. Фразменты могут быть трех разных форм: прямоугольные, круглые и многоугольные.

Прямоугольники

Чтобы описать прямоугольный фрагмент изображения, необходимо задать координаты левого верхнего и правого нижнего углов прямоугольника в пикселах. Тогда браузер поймет, что область между этими двумя точками задает ссылаемую область в виде прямоугольника.

Координаты задаются парами чисел в пикселах. Предположим нужно задать область ссылающуюся на файл SURF.HTML из нашего рисунка. Область должна соответствовать пиктограмке с человеком на серфинг-доске. Я заранее знаю коориднаты верхнего левого угла: 27 по оси X и 8 по оси Y; и правого нижнего: 92 по оси X и 73 по оси Y. Следовательно, я должен создать код такого вида: <img border="0" src="int.jpg" usemap="#interests"> <map name="interests"> <area alt="Surfing" href="surf.html" shape=rect coords="27,8,92,73"> </map>

Теперь протестируйте код на изображении:

Теперь я подробно расшифрую весь код. Новым для нас здесь стало alt="Surfing" и shape=rect. С альтернативным текстом alt="Surfing" мы уже знакомы, посто знайте, что его можно использовать и здесь. shape=rect дает браузеру знать, что данная область - не круг, не многоугольник, а прямоугольник, следовательно coords="..." должен состоять из четырех точек. Вообще shape=rect - необязательный тег. По умолчанию в AREA всегда идет shape=rect.