Как часть картинки сделать ссылкой?

14

Posted by Виктория Павловна Дончик | Posted in О блоге | Posted on 03-03-2012

Метки: , , ,

Как часть картинки сделать ссылкой?

MS Word MS Excel Уроки по информатике

Сегодня мы поговорим о том, как разные части картинки сделать ссылками, т.е. мы научимся делать карту изображения. Сегодня мы узнаем какие области могут быть ссылками, как сделать эти области ссылками, научимся определять координаты прямоугольной области в Paint, напишем html-код картинки, в которой кнопочки-прямоугольники будут ссылками. 

Напомню, как сделать картинку ссылкой мы разобрали в этом видеоуроке, а сегодня разберемся как часть картинки сделать ссылкой. Итак, для начала я познакомлю Вас с тегом <map></map>. Именно он сделает нашу картинку картой изображения. Обратите внимание тег парный (имеет тег </map>!). Чтобы обозначить геометрические области для клика (кнопочки на нашей картинке) внутри этой карты, нужно воспользоваться тегом <area>. Итак, скелет html-кода нашей картинки будет выглядеть так:

  • <map> <area атрибуты> </map>

Чтобы было проще Вам понять о чем идет речь, вот картинка с которой мы будем  работать и геометрические области, выделенные желтым цветом будем делать ссылками. (Кстати, можете проверить работу кнопки "MS Word", щелкните по ней левой кнопкой мыши, чтобы открылся раздел "MS Word").

Как часть картинки сделать ссылкой?

Итак, чтобы геометрические области (кнопочки на картинке) сделать ссылками, нужно в теге <area> прописать атрибуты shape и coords. Что такое shape? Все просто. Как Вы поняли части картинки, которые мы будем делать должны быть в виде:

  • прямоугольника (shape="rect");
  • овала (shape="circle");
  • многоугольник (shape="poly").

Т.е. shape - это вид нашей кнопочки (области на картинке), а coords - ее координаты. Записываются координаты вот так:

  • прямоугольник - coords="x1,y1,x2,y2", при этом (x1,y1) - координаты левого верхнего угла, а (x2,y2) - координаты правого нижнего угла;
  • окружность - coords="x,y,R", где (x,y) - координаты центра окружности, а R - радиус;
  • многоугольник - coords="x1,y1,x2,y2,...,xN,yN", где (xN,yN) - координаты соответствующей вершины.

Т.о. html-код нашей картинки для кнопочки "MS Word" будет выглядеть так:

  • <map> <area  shape="rect" coords="0,12,69,69"> </map>

Как я узнала координаты? Очень просто открыла картинку в Paint, навела в левый (правый) верхний (нижний) угол и посмотрела координаты в правом нижнем углу:

Как узнать координаты вершины прямоугольника

И это еще не все! Надо прописать путь к той страничке, которая при щелчке ЛКМ должна открываться. Для этого в теге <area> нужно добавить атрибут href= "ссылка на страницу". Итак, html-код будет выглядеть так:

  • <map> <area  href= http://informatikurok.ru/category/word  shape="rect" coords="0,12,69,69"> </map>

Все? Почти. Осталось дело за малым. Нужно теперь нашей картинке объяснить, что она будет  картой с областями для ссылок. Для этого нашу карту нужно назвать, т.е. дать ей имя, используя атрибут name="karta" в теге <map>. Теперь html-код карты будет выглядеть так:

  • <map name="karta"> <area  href= http://informatikurok.ru/category/word  shape="rect" coords="0,12,69,69"> </map>

А в html-код картинки  (в тег <img>) нужно добавить usemap="#karta".  Ну вот, практически и все. Все коды готовы. Теперь нам осталось только  разобраться куда вставлять тег <map>.

И здесь все просто. Тег <img> находит тег <map> по имени, поэтому все равно, где он будет расположен. Но я все-таки рекомендую писать  тег <map> после тега <img>. Так проще будет искать и исправлять ошибки. Теперь нужно открыть WordPress html редактор и отредактировать html-код странички как показано на картинке :

Где писать и как связать теги  <img> и <map>

Думаю, все остальные прямоугольные области Вы сделаете ссылками самостоятельно. Главное, не ошибиться в координатах и для каждого прямоугольника прописать свой тег <area>. Кстати, в картинке в заголовке статьи все прямоугольные области являются ссылками.

Итак, сегодня мы узнали:

  • как сделать часть картинки ссылкой;
  • что такое карта изображений;
  • как сделать прямоугольную область ссылкой.

О том как сделать область в виде окружности ссылкой, поговорим в следующем посте.

Comments (14)

Нужно будет разобраться с этим задание, думаю, пригодится.

Да, задание трудоемкое, но полезное для тех, кто не хочет ставить дополнительные плагины.

Такая нужная статья, мне точно пригодится

А я как раз искала подобную информацию. Задумала сделать интересную главную страницу сайта, но вот как это реализовать, не знала. Спасибо!

Надо обязательно эту тему разобрать подробно.

Очень полезная статья! спасибо за ценную информацию!

Спасибо за полезный урок.

Очень полезный сайт. Поместила в завкладки. Еще вернусь.

Действительно, очень полезная статья для начинающих.Спасибо большое

Виктория, спасибо за подробную пошаговую инструкцию! Пригодится! :)

Спасибо за поучительный урок, надо разобратся и применить себе.

а как привязать к 1 картинке неск-ко карт?

Интересный сайт. Я в коде только недавно стала разбираться. Буду заходить почаще.

Долго искал, спасибо автору, очень понятно написано.

Write a comment