Чертёж восьмой Карта ссылок

У тебя возник вопрос – кто это так поиздевался над «фотографией» Васиных друзей и зачем он это сделал?

Ответ – эта разметка, сделанная в редакторе Paint, поможет разбить «фотографию» на области, каждая из которых будет являться ссылкой на какую-нибудь страничку и иметь свою подпись-подсказку.

1. Открой файл drug.jpg в графическом редакторе Paint и сделай разметку, запомнив необходимые координаты:

c если статусная строка не отображается, включи её – меню Вид à Строка состояния;

c выбери инструмент овал и возьми мордочку Дуси в круглую рамку;

c не отпуская кнопку мыши, посмотри на правую часть статусной строки – в двух полях там выведены две пары чисел (на рисунке это 16, 16 и 148х148) – слева координаты точки, с которой ты начал рисование фигуры, справа ширина и высота фигуры;

c вычисли координаты центра нарисованной окружности и её радиус: ;

c сохранять картинку с разметкой, конечно же, не надо, но и закрывать её пока рано;

c в файл glav.htm добавь выделенный текст:

< IMG usemap=#karta src=" images/drug.jpg" align=right

width=395 height=194 alt=" Мои друзья" >

< MAP name=karta>

< AREA shape=circle coords=90, 90, 74 href=dusja.htm

alt=" Дуся" >

< /MAP>

В тег < IMG> добавлен новый атрибут usemap, значением которого является имя карты после знака #.

Тег < MAP> < /MAP> задаёт описание карты, в атрибут name записывается имя карты (то самое, которое записано в атрибуте usemap тега < IMG>). Внутри этого тега размещается один или несколько тегов < AREA> со следующими атрибутами:

shape – форма области (circle – круг, rect – прямоугольник, poly – многоугольник);

cords – координаты (для круга – координаты центра и радиус, для прямоугольника – координаты левой верхней и правой нижней вершин, для многоугольника – координаты всех его вершин), отсчитываются от левого верхнего угла рисунка;

href – уже знакомый атрибут, указывающий, какой файл загрузится при щелчке по этой области;

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

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

2. Открой страничку в браузере и наведи указатель мыши на мордочку кошки Дуси. Указатель превратился в лапку? Всплыла подсказка Дуся? Щёлкни по мордочке. Если загрузилась Дусина страничка, значит, ты всё сделал правильно.

3. Закончи формирование карты:

c вернись к рисунку, открытому в Paint, и нарисуй прямоугольник вокруг мордочки пса Погромыча; не забудь запомнить координаты, прежде чем отпустить кнопку мыши (пусть это будут, например, 209, 42 и 142х105);

c подсчитай координаты правого нижнего угла прямоугольника (209+142=351 и 42+105=147) или просто посмотри их в том же поле, наведя перекрестие мыши на вершину прямоугольника;

c нарисуй вокруг головки синички многоугольник, запоминая координаты каждой вершины – они записываются в том поле, которое левее (в нашем примере изображён шестиугольник, поэтому координат будет 6х2=12);

c добавь в файл glav.htm выделенные строки:

< IMG usemap=#karta src=" images/drug.jpg" align=right

width=395 height=194 alt=" Мои друзья" >

< MAP name=karta>

< AREA shape=poly

coords=125, 114, 126, 160, 180, 187, 235, 160, 235, 112, 180, 74

href=klava.htm alt=" Клава" >

< AREA shape=rect coords=209, 42, 351, 147 href=pogrom.htm

alt=" Погромыч" >

< AREA shape=circle coords=90, 90, 74 href=dusja.htm

alt=" Дуся" >

< /MAP>

4. Проверь работу карты. Обрати внимание, что при щелчке по области вокруг неё появляется тоненькая рамка, показывающая границу области. Её вполне можно использовать для более точной подгонки границ.

5. И ещё небольшое замечание. Совсем необязательно использовать карту ссылок для ссылок. Иногда бывает нужно просто сделать подсказки для отдельных областей изображения. В этом случае атрибут href не пишется. И всё!

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