Ссылка на картинке [HTML]

Сегодня столкнулся с проблемой, как сделать не всю картинку ссылкой, а только часть картинки, точнее часть картинки — одна ссылка, а остальная часть — вторая ссылка. На самом деле есть такой тег <map>, с помощью него можно указать область, которая будет ссылкой.

Как сделать ссылку внутри картинки?

Значит тег <map> объединяет показатели <area>, которые  указывает в каком месте будем ссылка в картинке с названием name. Короче, проще на картинке показать, чем язык сломать. Вот у нас есть картинка, для простоты объяснения это квадрат и он имеет 4 разноцветных поля.

Так вот <map> вместе с <area> позволяет нам сделать например 4 ссылки на этом квадрате, чтобы при нажатии на красный квадрат — открывалась одна ссылка, зеленый — другая и тд..

Первый делом, прописывая <img> мы задаем ему параметр usemap=»box», чтобы созданная нами карта под именем «box» знала к какой картинке относится. То есть <img src=»bla-bla.jpg» usemap=»box»>. Все, картинку мы обозначили. Теперь приступаем к созданию карты. Вид у нее такой <map name=»box»><area атрибут></map>.

Атрибуты могут быть 1) областью в виде окружности (circle); 2) область в виде многоугольника (poly); 3) в виде прямоугольника (rect)

Нам тут ясное дело проще всего будет прямоугольник, т.к там нужно указывать все 2 координаты. Пишем <area shape=»rect» coords=»кординаты» href=»ссылка.html»>. Координаты пишутся через запятую и все 4 (в данном случае). Наш квадрат размерами 150×150, соответственно красный квадрат будет в координатах примерно 0,0,75,75 ну и остальные по аналогии. Получается:

<area shape=»rect» coords=»0,0,75,75″ href=»ссылка.html»> — красный
<area shape=»rect» coords=»0,75,75,150″ href=»ссылка.html»> — синий
<area shape=»rect» coords=»75,0,150,75″ href=»ссылка.html»> — зеленый
<area shape=»rect» coords=»75,75,150,150″ href=»ссылка.html»>  — желтый

Чтобы при наведении было описание в area добавим title и ссылку поставим на категорию html, где можно посмотреть другие html-теги и как их использовать. Вот что получилось.


Код получился вот такой:

<img src="https://miroslavs.com/wp-content/uploads/2012/08/12.png" usemap="box">
<map name="box">
<area shape="rect" coords="0,0,75,75" href="/html/" title="Красный">
<area shape="rect" coords="0,75,75,150" href="/html/" title="Синий">
<area shape="rect" coords="75,0,150,75" href="/html/" title="Зеленый">
<area shape="rect" coords="75,75,150,150" href="/html/" title="Желтый">
</map>

Теперь, по-аналогии, я  думаю, вы сделаете любую карту для любой картинки. немного подумать и главное указать правильные координаты. 😉 Если вдруг вам проще читать технический язык, а не мои распинания, то на хтмлбук по тегам map и area можно найти его.

Надеюсь, эта статья поможет раскрутке сайта, т.к подобная статья про якори в html частенько приносит посетителей. Главное выбрать нужные ключи и продвигать их в яндексе или в гугле, как это делает Виталий, автор блога mojwp — утконос в топ google. Хоть ради конкурса, но есть чему поучиться.

Предлагаю отвлечься на видео из индийского фильма, которое поражает спецэффектами 😀

Обсуждение: 9 комментариев

  1. Влад:

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

    Ответить
  2. Михаил:

    Довольно прикольно получается и довольно таки разнообразить сайт можно. Именно такие неординарные фишки и делают более интересным сайт.

    Ответить
    1. Влад:

      Такого рода фишек очень много. И каждая по своему индивидуальна, но есть один минус о них знают практически все и не всегда такого рода фишки делают ваш сайт уникальным.

      Ответить
  3. у меня картинка не отображается (

    Ответить
    1. поправил 🙂 Это я назвал ее стразу «безимени» русскими, а потом перезжал на другой хостинг и не все поправил

      Ответить
  4. zwezdaletit:

    Дорого автор, вы конечно не обижайтесь, но тег map это один из самых элементарных тегов, который должен знать каждый. У нас про него рассказывали еще на первом курсе, в сама начале введения в html 🙂 Мне бы на вашем месте было стыдно не знать такие вещи 😉

    Ответить
    1. ну извините-извините, я по-образованию вообще бухгалтер по-первому, банкир — учусь 🙂

      Я знал, но не помнил, может тоже кто не помнит. Вот и поможет моя статья 😉

      Ответить
  5. seo-boy:

    Спасибо, хороший способ сделать карту сслыок

    Ответить
  6. Уважаемый автор.
    Имеется небольшая описочка.
    Вместо usemap=»box» необходимо писать usemap=»#box».

    Ответить

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.

© 2019 Miroslavs.com ·  Дизайн и техподдержка: Goodwinpress.ru