Карты ссылок
Карты ссылок
Изображения на Web-страницах часто используются как карта ссылок (image map). Щелчки курсором мыши в окне браузера на различных участках такого изображения приводят к загрузке разных страниц. Для реализации этого механизма отдельным фрагментам изображения необходимо сопоставить различные гипертекстовые ссылки.
Создадим изображение в Photoshop на основе карты Европы, которую мы создали. На карте цветом выделены несколько стран, в которые некая фирма организует туры. Изображение будет размещено на сайте этой фирмы и будет служить картой ссылок на страницы с подробной информацией о каждом туре. Иными словами, щелчок курсором мыши на территории каждой страны в этой карте должен приводить к отдельной Web-странице.
ImageReady предлагает удобный способ создания карт ссылок. Она автоматически генерирует необходимый код на основе разбивки на фрагменты, выполненной пользователем. Каждый фрагмент, которому назначается отдельная ссылка, должен занимать свой слой. Таким образом, URL-ссылка является атрибутом слоя. Для его ввода используется палитра Layer Options/Effects.
1. Откройте документ europe.psd и сохраните его под именем europe_map.psd с помощью команды Save As из меню File.
2. В палитре Layers выделите слой, соответствующий территории одной из стран, например, Holland.
3. В палитре Layer Options/Effects установите флажок Image Map. Он включает режим создания карты ссылок и открывает поля Shape и URL.
4. В поле URL вводится ссылка на какой-либо сетевой ресурс, которая сработает при щелчке курсором мыши на выбранном объекте в браузере. Допустим, вы предполагаете, что должна открыться страница holland.html, расположенная на сервере в том же каталоге, что и изображение с картой ссылок. В этом случае достаточно просто ввести имя файла документа в поле URL. Введите в это поле "holland.html".
5. Список Shape предоставляет выбор формы области изображения, откликающегося на щелчок курсором мыши в браузере. Это может быть прямоугольник (Rectangle), круг (Circle) или многоугольник (Polygon). Если форма фрагмента близка к одному из первых двух примитивов, то выбирайте соответствующий. Если форма области изображения более сложная, как и в нашем случае, то выберите последний вариант. Испльзование прямоугольной или круглой форм предпочтительно, поскольку приводит к генерации более компактного HTML-кода, а следовательно и более быстрой загрузке страницы.
6. Аналогичным образом введите имена документов для остальных стран. В качестве имени документа исполльзуте имя слоя . Обратите внимание, что имя показывается в палитре слоев непосредственно под именем каждого слоя (Рисунок 10.48.)
