Сенсорные рисунки

Сенсорный рисунок - это рисунок, разделенный на отдельные участки ("горячие области", "hot spots"), каждый из которых, как правило, является гиперссылкой на отдельный документ или связан с какой-либо процедурой.

Пример. Сенсорный рисунок "Гнездо в трубе"

При перемещении курсора по изображению появляются различные подсказки. При нажатии кнопки "мыши" происходит действие, представляющее сообщение.

Это достигается с помощью кода:

<img src="Map/130604%20011.jpg" width="800" height="600" usemap=#vid >
<map name=vid>
<area href="#" shape="circle" coords="239,177,34" onClick="alert('У этого птенца рот закрыт');" title="Первый птенец">
<area href="#" shape="circle" coords="342,217,34" onClick="alert('У этого птенца рот закрыт');" title="Второй птенец">
<area href="#" shape="circle" coords="413,214,34" onClick="alert('Этот сильно проголодался!');" title="Третий птенец">
<area href="#" shape="circle" coords="397,278,34" onClick="alert('У этого птенца рот закрыт');" title="Четвертый птенец">
<area href="#" shape="circle" coords="425,335,34" onClick="alert('У этого птенца рот закрыт');" title="Пятый птенец">
<area href="#" shape="circle" coords="217,293,34" onClick="alert('У этого птенца рот закрыт');" title="Восьмой птенец">
<area href="#" shape="circle" coords="350,370,34" onClick="alert('Какой рот огромный!');" title="Шестой птенец">
<area href="#" shape="circle" coords="271,362,34" onClick="alert('Этот птенец не до конца разинул клюв!');" title="Седьмой птенец">
<area href="#" shape="poly" coords="2,174,4,133,348,255,338,291" onClick="alert('Проволока, на которой держится гнездо');" title="Проволока">
<area title="Труба" shape=RECT coords="4,-5,799,130" href="#" onClick="alert('Внутренность трубы');">
<area href="#" shape="circle" coords="84,308,82" onClick="alert('Внутренность трубы');" title="Труба">
<area href="#" shape="poly" coords="476,426,469,132,797,131,798,595,9,596,9,384,252,431" onClick="alert('Внутренность трубы');" title="Труба">
</map>

Как видно из приведенного фрагмента, тэгу <img>, обеспечивающему вывод изображения, соответствует контейнер <map>...</map>, задающий "карту разбивки" рисунка на "горячие области". Редактируя этот объект в режиме "Design" программы Macromedia Dreamweaver MX 2004 можно увидеть следующую карту разбивки рисунка.


Карта должна иметь уникальное имя, задаваемое атрибутом name. Каждая область задается тэгом <area>, их может быть сколько угодно.

Программа Macromedia Dreamweaver MX 2004 позволяет с помощью мыши выделять области, копировать их, менять размер или форму.

Основные атрибуты тэга <area>:

shape Задает форму области:
  • прямоугольник (rect, rectangle),
  • многоугольник (poly, polygon) или
  • круг (circle).
    • coords Задает координаты (левый верхний и правый нижний углы прямоугольника; вершины многоугольника; точка на окружности и центр круга).
    href

    Адрес документа, вызываемого при щелчке на данной области или '#', если загружать новый документ не нужно.

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

    title Текст, всплывающий при наведении мыши на соответствующую область.

    Рисунок может загружается до разбивки карты (предыдущий рисунок) или после разбивки карты (последующий рисунок) с помощью контейнера <map>...</map>. В тэг <img> добавляется атрибут usemap=#имя карты.

    Сенсорное изображение удобно использовать для объяснения деталей изображенных на рисунке.

    Вопросы для самоконтроля

    ЗАБЫЛ...ОБРАТНО! Оглавление ДАЛЬШЕ! ДАЛЬШЕ! ДАЛЬШЕ!