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

После того как изображение помещено на веб-страницу, настало время графически на нем задать каждый фрагмент. Представьте себе, что изображение ненесено на большой лист миллиметровки, на котором вам необходимо определить точные координаты 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>), и все. Таким образом, вы создали ваше собственное изображение-карту.

Итог занятия

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