InformatikUrok

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

Сегодня мы поговорим о том, как разные части картинки сделать ссылками, т.е. мы научимся делать карту изображения. Сегодня мы узнаем какие области могут быть ссылками, как сделать эти области ссылками, научимся определять координаты прямоугольной области в 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= /category/word  shape="rect" coords="0,12,69,69"> </map>

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

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

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

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

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

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

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

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