Твитнуть об этом видео
Поделиться на Facebook
Поделиться по E-mail
Скачать исходники к 11 видеоуроку по HTML Размер: 46.35 kB, скачали: 577 раз.
- Разархивировать скачанный файл.
- Открыть папку index.
- Запустить файл index.html в браузере.
Что такое навигационные карты и для чего они нужны?
Представьте, у вас на сайте есть изображение, и у вас появилась потребность сделать часть этого изображения ссылкой. Это может быть и прямоугольник, и круг, и многоугольник. В этом вам помогут навигационные карты. Ссылка может быть как на HTML-документ, так и на любой другой формат файла.
Как сделать навигационную карту?
Давайте разберем, как эти навигационные карты прописываются в коде. Это делается непросто.
<img src="map1" usemap="#map1"> <map name="map1"> <area shape="rect" coords="x1, y1, x2, y2" href="about.html" alt=""> <area shape="rect" coords="x1, y1, x2, y2"…> <area shape="circle" coords="x,y,R"…> <area shape="poly" coords="x1, y1, …,xN, yN"…> </map>
Сначала идет обычное изображение, добавляется атрибут usemap, потом идет символ «#» и далее – название нашей карты. Затем открывающий тег <map>, атрибут name, значение атрибута name – значение нашей карты. Далее следует тег <area>, который имеет атрибуты:
- shape – это форма нашей фигуры. Может принимать значения такие, как rect (прямоугольник), circle (круг) и poly (многоугольник).
- coords – координаты.
- Для прямоугольника указывается четыре координаты: x1, y1, x2, y2. Рассмотрим их на примере: левый верхний угол – точка с координатами (x1,y1), правый нижний угол – (x2, y2). Вспоминаем школьную математику. Существуют координатные прямые: ось Х и ось У. В нашем случае ось Х направлена вправо, а ось У – вниз. Проведя перпендикуляры от вершин прямоугольника до осей, получим, что координаты идут в таком порядке: по оси Х – x1, x2; по оси Y – y1, y2. В итоге по двум точкам с координатами (x1,y1) и (x2,y2) и строится наш прямоугольник.
- Координаты круга задаются иначе: задается x, y (центр круга) и радиус R.
- Многоугольник строится совсем по-другому: задаются координаты первой точки, второй, третьей и т.д. Они записываются последовательно, и последовательно строится сам многоугольник.
- href – ссылка на которую ведет наша форма в изображении. С этим атрибутом мы уже знакомы. Например, это документ about.html. Не важно, что является фигурой: прямоугольник, круг или многоугольник – атрибут href может применяться везде.
- alt – всплывающая подсказка к формочке. Указывается в кавычках.
Последним тегом будет </map>, который закрывает нашу карту.
Давайте перейдем в код и поработаем над всеми формами изображений и картой. После этого вам будет дано домашнее задание. Оно будет аналогично тому, что мы проделаем в этом видеоуроке.
Итак, приступим. Для начала перенесем наше изображение map.png в папку img, проверяем, что оно скопировалось, и переходим в код индексного файла, где и пропишем изображение. Давайте это сделаем прямо после закрывающегося тега <h1>. Сначала прописываем изображение и путь к нему, далее идет атрибут usemap, где мы указываем будущее имя карты, например map1. После этого прописываем тег карты <map>, тег <area> (в переводе означает «площадь», «участок»), атрибут shape со значением rect и координаты coords, которые мы узнаем либо, подставляя значения методом «тыка», либо используя программу Microsoft Office Picture Manager. Открываем ее на своем компьютере, выбираем Рисунок-> Обрезать и, с помощью простых действий, узнаем точку (x1, y1). Копируем полученные пиксели в наш код. Отступ по X x1=70, отступ по Y y1=43. Теперь нам нужно указать вторую точку — (x2, y2). Снова переходим в программу, делаем простые движения нашей мышью и узнаем вторую точку: отступ слева – 270, отступ сверху – 121. Далее идет атрибут href. Сделаем ссылку на about.html – страничку «О нас». Затем прописываем alt, например, «О нас». Тег <area> не требует закрывающего тега, поэтому мы заканчиваем нашей треугольной скобкой.
<img src="img/map.png" usemap="#map1"> <map name="map1"> <area shape="rect" coords="70,43,270,121" href="about.html" alt="О нас"> </map>
Сохраняем и проверяем в браузере наше творчество. Как видим, при наведении на наш прямоугольник, появляется рука, которая означает ссылку, и при нажатии на прямоугольник появляется страница. Кстати, существует еще атрибут target. Мы его уже проходили, и вы можете его тоже тут использовать.
Теперь давайте проделаем то же самое с оставшимися фигурами: кругом, многоугольником и еще одним прямоугольником. Перейдем обратно в код. Прописываем тег <area>. Атрибут shape у нас снова будет прямоугольником – rect, ссылка будет на тот же файл. Теперь давайте узнаем наши координаты. Переходим в программу. Узнаем значение x1 и y1. Это 476 и 37 пикселей. Узнаем значения x2, y2. Это 556 и 243 пикселя.
<img src="img/map.png" usemap="#map1"> <map name="map1"> <area shape="rect" coords="70,43,270,121" href="about.html" alt="О нас"> <area shape="rect" coords="476, 37, 556, 243" href="about.html" alt="О нас"> </map>
Сохраняем, проверяем в браузере. Вот и второй прямоугольник стал ссылкой.
Теперь давайте поработаем над кругом. Переходим снова в код. Пишем тег <area>, shape – circle, а координаты здесь задаются уже по-другому. Нам нужно найти центр круга и его радиус. Переходим в программу. Центр круга указать проблематично, поэтому в конце данного видео урока я вам предложу еще один вариант построения навигационных карт. Копируем значения 147 и 199. Теперь узнаем радиус. Для расчета радиуса нам нужно запомнить наше значение слева – 147. Потом переместить ползунок в другую сторону и запомнить новое значение слева – 208, отнять 147 от 208 – это будет 61, и подставить его вместо радиуса. Если будут сложные значения, вы можете использовать калькулятор. Ссылку поставим на тот же файл – about.html. Давайте пропишем значение target — _blank, а title не будем прописывать.
<img src="img/map.png" usemap="#map1"> <map name="map1"> <area shape="rect" coords="70,43,270,121" href="about.html" alt="О нас"> <area shape="rect" coords="476, 37, 556, 243" href="about.html" alt="О нас"> <area shape="circle" coords="147, 199, 61" href="about.html" target="_blank"> </map>
Сохраним наш документ и проверим в браузере. Как мы видим, наш круг стал ссылкой. При нажатии на него, страница открывается в новом окне.
У нас остался последний элемент – многоугольник. Перейдем снова в код. Прописываем тег <area> , shape – poly, координаты снова задаем, но в этот раз по всем точкам. Переходим в нашу программу и узнаем координаты первой точки: 270 от левого края и 160 от верхнего. Ставим запятую, узнаем координаты второй точки: 351, 174. Третьей точки: 434,160. Четвертой: 417, 203. Пятой: 433,248. Шестой: 351, 236. Седьмой: 270, 250. Восьмой: 287,204. Ссылку зададим ту же – about.html. Значение target — _blank, title – «О нас».
<map name="map1"> <area shape="rect" coords="70,43,270,121" href="about.html" alt="О нас"> <area shape="rect" coords="476,37,556,243" href="about.html" alt="О нас"> <area shape="circle" coords="147,199,61" href="about.html" target="_blank"> <area shape="poly" coords="270,160,351,174,434,160,417,203, 433,248,351,236,270,250,287,204" href="about.html" target="_blank" title="О нас"> </map>
Сохраняем, обновляем страничку. Как мы видим, наш многоугольник стал ссылкой. Она откроется тоже в новом окне. Кстати, при наведении появляется всплывающая подсказка «О нас». При переходе в новом окне открывается страничка «О нас».
На этом данный видеоурок мы с вами заканчиваем. Я обещал дать домашнее задание и рассказать еще один способ построения навигационных карт. Этот способ предполагает использование дополнительных программ, например, таких как Macromedia Dreamweaver или каких-нибудь других. В этих программах вы сможете построить навигационные карты гораздо проще, и вам не придется для этого узнавать координаты точек.
Теперь перейдем к домашнему заданию. Вам предстоит построить четыре фигуры: два прямоугольника, один круг и стрелочку (многоугольник).
Спасибо за внимание и до встречи в следующем видеоуроке, в котором вы узнаете, как сделать таблицу или вложенные таблицы в HTML.
Info-line.net
Спасибо за уроки, все понятно и интересно. Но столкнулась с проблеммой 10, 11 уроки виснут после 4, 25 минуты и 5, 43 минуты. Можно ли как то устранить проблемму?
Странно, у меня такой проблемы нету. Если вы смотри в онлайне, возможно они подвисают из-за того, что не успели подгрузиться. Чтобы смотреть видео в самом лучшем качестве — скачайте видеоурок. Там и подвисать не должно 🙂
они все нормальные видеуроки я смотрел в лучшем качестве *THUMBS UP*
Извините, скачала и никаких проблем. =)
В первом примере в слове cords не хватает «о», блин, пол часа мудохался 🙂 не мог понять в чем проблема. Потом нашел это о и всё заработало 🙂 Спасибо за урок.
Спасибо! Исправил)
у меня не работает тег alt вместо него приходится использовать title =) открываю через google chrome
в опере тоже не работает
Олег, а скажите еще, пожалуйста, где можно скачать Macromedia Dreamweaver?
Нелегальные версии вы без труда можете найти в интернете. Простите, но в этом я Вам помогать не буду, так как не хочу нарушать авторские права 🙂
Олег, здравствуйте!
Не могу разобраться откуда мне вытащить подготовленные Вами изображения с фигурами (прямоугольник, круг, многоугольник) в 11 уроке и эмблему Вашего сайта в 9 уроке. Помогите пжалуйста разобраться ине с этим вопросом!
Скачайте исходники к урокам. Ссылки на скачивание материалов и видеоурока располагаются в синем блоке под онлайн-видео.
А вот у меня вопрос.А если я не хочу геометрическую фигуру, если просто картина какая-нибудь. как мерить? спасибо Олег за видео мне реально интересно смотреть т пробовать. удачи вам !!!))) (мой вопрос остается в силе)
Использовать shape="poly". Если картинка очень сложная и точек очень много, воспользуйтесь визуальными редакторами, в которых выделять точки более удобно (пример: Adobe Dreamviewer).
P.S. Возможно в интернете есть какая-нибудь программа или онлайн-сервис, выполняющий подобную функцию. Пользоваться ими мне не приходилось, поэтому онлайн-аналоги данной программы подсказать не могу.
спасибки))))))) обошлась office picture maneger. увлеклась не заметила потраченного времени ,прикольно.
здравствуйте Олег. Скажите мне пожалуйста вот что. Я все сделала ,все замечательно с этими картами получилось. но потом решила изменить размер картинки на меньший ,прописала в img width и height , картинка изменилась ,координаты пропали. как поступать в таких случаях. логически понимаю что ерунду учудила. но мне нужно подтверждение.короче ,если не сложно объясните пожалуста . заранее благодарю
1. Можно убрать прописанную ширину и высоту.
2. Можно прописать новые координаты.
Огромное Спасибо !!! Очень пригодилось !