Обучающие и познавательные статьи

Для разметки областей в какой-то мере можно исползовать и фотошоп, но лучше в графическом редакторе. Я расскажу как это делать в DreamWeaver-е, который идеально подходит для этой цели. Сначала мы создадим тег div, содержащий изображение с нашего примера:
<div>
<img src="images/stories/si-1.gif" alt="Picture" usemap="#rabmap" />
</div;>
Для размещения на нашем изображении "горячих областей" используем штатные элементы управления редактора. Панель управления "горячими областями" находится в левом нижнем углу редактора, в области свойств (Properties) и выглядит как на рисунке ниже:
Но, панель управления не появится, пока мы не добавим в наше изображение свойство usemap. На панели управления имеются четыре кнопки, расположенные в одной строчке вдоль нижней границы окна редактора свойств. Они визуально составляют две группы. Правая группа состоит из трех кнопок, на которых изображены прямоугольник, круг и многоугольник, соответствующие одноименным "горячим областям". Слева расположена единственная кнопка, из чего состоит вторая группа (стрелка). Эта кнопка активна по умолчанию и позволяет манипулировать уже созданными "горячими областями" (активировать, перемещать, менять размеры, контур). С помощью этих кнопок создавать "горячую область" очень просто. Для начала создадим прямоугольную. Щелкаем разово на кнопке с изображением прямоугольника, переносим курсор на то место изображения, где будет расположена левая верхняя точка будущей прямоугольной области и нажимаем левую кнопку мыши (ЛКМ), не отпуская ее протащим мышку вниз и вправо, и отпускаем, когда прямоугольная область будет сформирована (Вы увидите как за мышью "потянется" контур, обрамляющий светло-синюю прямоугольную область). В поле Map Dreamweaver подставит строку "Map", что является уникальным именем нашей карты-изображения. При желании это имя можно менять на любое другое, это особенно важно, если вы на своей странице будете создавать несколько изображений-карт. В имени допускаются только латинские буквы, цифры и знак подчеркивания, при условии, что имя начинается с буквы. В завершение создания "горячей области" Dreamweaver создает тег map (откывает, закрывает, связывает имя тега с именем карты-изображения) и в нем создает тег area, соответствующий нашей прямоугольной области.
В результате в в области Design редактора мы получаем такую картину (рис. 2). В редакторе удобнее поставить режим просмотра Разделенный (Split). Но в отдельные моменты для лучшей видимости можно переходить на Design. Аналогично создаем круглую "горячую область". Создание многоугольной "горячей области" несколько сложнее. Кликнув разово по кнопке многоугольника, переносим курсор на изображение и кликом ЛКМ ставим первую точку многоугольной "горячей области", затем вторую, третью и т.д., двигаясь по контуру в любом направлении часовой стрелки. Не страшно, если Вы несколько запутаетесь в последовательности. В этом случае появится область с пересекающимся контуром. Его можно исправить после завершения создания "горячей области". Завершается создание "горячей области" нажатием клавиши ESC или кликом мыши в другом месте. Кликом по любой "горячей области" делаем ее активной и можем перетащить в любое другое место. Нажимая ЛКМ на узловые точки "горячей области" (выделенные цветом точки) и протаскивая, мы увеличиваем (уменьшаем) ее до нужных размеров. Каждый раз DreamWeaver, при необходимости, создает новые теги area и корректирует координаты уже имеющихся "горячих областей". Указанным методом мы создали "горячие области" для дома, авто, ноутбука и солнца. Наше изображение-карта готовово. Результат показан на рис.3. Узловые точки автомобиля пронумерованы для наглядности.

Конец статьи.