Навигационная карта

{"draftJsState":{"blocks":[{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":5,"offset":49,"style":"BOLD"},{"length":3,"offset":105,"style":"BOLD"}],"text":"За вставку картинок в HTML-документ отвечает тег и его атрибуты, главным из которых можно считать src , задающий адрес изображения. Он является обязательным, так как если не указать, где взять рисунок, браузер не сможет узнать, что именно добавлять на страницу.","type":"unstyled","key":"58avi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Простейший случай вставки картинки будет выглядеть так (изображение называется image.png и находится в той же папке, что и HTML-документ):","type":"unstyled","key":"ar2b0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"unstyled","key":"ckbni"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":5,"offset":14,"style":"BOLD"},{"length":3,"offset":57,"style":"BOLD"},{"length":3,"offset":123,"style":"BOLD"}],"text":"Раньше у тега был ещё один обязательный атрибут — alt , но с приходом HTML 5 он был переведён в разряд желательных. alt устанавливает текст, который пользователь увидит вместо картинки, если она вдруг не загрузится. Этот атрибут рекомендуют добавлять и некоторые оптимизаторы, потому как считается, что это положительно сказывается на продвижении в поисковиках.","type":"unstyled","key":"apq6l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":5,"offset":209,"style":"BOLD"},{"length":6,"offset":237,"style":"BOLD"}],"text":"Если не указывать изображению никаких дополнительных атрибутов, то оно будет выведено в полный размер, а нужно это бывает далеко не всегда. К счастью, желаемый размер рисунку можно задать при помощи атрибутов width (указывает ширину) и height (определяет высоту). Размеры можно записывать либо в пикселях, либо в процентах. Во втором случае процент обозреватель будет высчитывать от родительского элемента (например, абзаца, в который вставлена картинка).","type":"unstyled","key":"54clc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":9,"offset":57,"style":"BOLD"}],"text":"Допустим, нам требуется добавить на страницу изображение image.png с альтернативным текстом «Просто картинка», шириной 420 и длиной 280 пикселей. Код в таком случае будет следующим:","type":"unstyled","key":"f3uhu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" $\"Просто$ ","type":"unstyled","key":"5hs7f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Навигационная карта","type":"header-two","key":"e580i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"О том, как сделать картинку ссылкой, мы говорили в предыдущей статье. Однако HTML позволяет задавать на одном изображении не одну ссылку, а сразу несколько. В результате пользователь, щёлкая на разные места одной картинки, будет переходить по разным интернет-адресам. Эту возможность можно использовать, например, для создания эффектного меню, интерактивных тестов или наглядных графических моделей.","type":"unstyled","key":"4l365"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для создания карты изображения (именно так называется описанная возможность) понадобятся следующие теги и атрибуты:","type":"unstyled","key":"31ohl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":5,"offset":0,"style":"BOLD"}],"text":" — контейнер, внутри которого описывается карта изображения.","type":"unordered-list-item","key":"5kin2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":0,"style":"BOLD"},{"length":5,"offset":21,"style":"BOLD"},{"length":6,"offset":146,"style":"BOLD"},{"length":5,"offset":183,"style":"BOLD"},{"length":6,"offset":190,"style":"BOLD"},{"length":4,"offset":232,"style":"BOLD"},{"length":4,"offset":238,"style":"BOLD"},{"length":4,"offset":246,"style":"BOLD"},{"length":4,"offset":252,"style":"BOLD"}],"text":" — тег внутри , описывающий одну область картинки. На сколько активных областей планируется разделить изображение, столько элементов и придётся поставить. Связка - работает точно так же, как связки

и
- , создающие списки.","type":"unordered-list-item","key":"cbddb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":5,"offset":0,"style":"BOLD"},{"length":6,"offset":22,"style":"BOLD"}],"text":"shape — атрибут тега , задающий форму ссылки. Активная область может иметь форму прямоугольника, многоугольника или круга.","type":"unordered-list-item","key":"35l71"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":5,"offset":0,"style":"BOLD"},{"length":6,"offset":73,"style":"BOLD"}],"text":"cords — определяющий координаты области атрибут. Также принадлежит тегу . Для прямоугольника указываются координаты левого верхнего и правого нижнего углов, для многоугольника — координаты вершин, определяя круг, необходимо задать координаты его центра и радиус.","type":"unordered-list-item","key":"4a45d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":0,"style":"BOLD"},{"length":3,"offset":23,"style":"BOLD"},{"length":5,"offset":118,"style":"BOLD"}],"text":"usemap — атрибут тега img , который связывает изображение с картой. Благодаря ему браузер понимает, что в контейнере описана карта именно этого рисунка.","type":"unordered-list-item","key":"5af7a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Пример карты изображения","type":"header-two","key":"c0lur"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":7,"offset":103,"style":"BOLD"}],"text":"Чтобы было понятно, как всем вышеперечисленным пользоваться, приведу элементарный пример. Есть рисунок map.jpg . Его нужно разделить на две активные области. Щелчок на верхней части (зелёный цвет) откроет сайт «Одноклассники», нижняя же часть (синий цвет) будет вести на «ВКонтакте». Ссылки должны открываться в новой вкладке. Для создания карты выполняем следующие шаги.","type":"unstyled","key":"v8ih"},{"data":{"image":{"id":"606575b2b85b906036ba3cc5"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"8s8i2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"1. Вставляем изображение на страницу и привязываем его к будущей карте (она будет называться social), для чего пишем следующий код:","type":"unstyled","key":"6r1kb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" $\"Простейшая$ ","type":"unstyled","key":"fbadq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"2. Определяем на картинке будущие активные области и соответствующие им координаты. Это можно сделать в Paint, Photoshop или любом другом графическом редакторе. В нашем случае всё элементарно: прямоугольники равны и по высоте (114 пикселей) и по ширине (384 пикселя).","type":"unstyled","key":"18ot7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"3. Начинаем создавать карту: открываем теги прописываем в атрибуте name её название, которое обязательно должно совпадать со значением свойства usemap самой картинки:","type":"unstyled","key":"d7j5k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"8kgmo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"4. С помощью тегов area определяем активные области:","type":"unstyled","key":"7t2pa"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\n","type":"unstyled","key":"a389s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"5. Закрываем карту:","type":"unstyled","key":"51s87"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"60ddb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Итогом работы стала картинка, щелчок на разных частях которой ведёт к открытию разных социальных сетей, и вот такой HTMLкод:","type":"unstyled","key":"2urm6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\n\n\n Навигационная карта\n\n\n $\"Простейшая$ \n\n\n\n\n","type":"unstyled","key":"290j6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Несмотря на то, что в качестве примера был рассмотрен самый простой случай, который только можно придумать, он наглядно демонстрирует принцип создания навигационных карт. Дальше — дело техники и определения координат, с точки зрения HTML ничего не усложняется.","type":"unstyled","key":"1bnli"},{"data":{"image":{"id":"606575c4e1bc535b106c81f7"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"2oakh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"3nqu5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"8jlth"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"WoMp5flHp9or76TBWlpL"}],"entityMap":{}},"mentions":[]}