Ссылка на картинке [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. Хоть ради конкурса, но есть чему поучиться.

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

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

  1. Влад:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    Ответить
  7. Александр:

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

    Ответить

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

Ваш адрес email не будет опубликован.

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

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