КАРТА ИЗОБРАЖЕНИЯ
Часто возникает вопрос как сделать картинку сразу двумя и более разными ссылками.
Простую ссылку на изображение можно сделать так.
Обернув изображение <img>в
тег< а>Например:
<a href=”url”><img border=”0”></a>
border=”0” – Добавляем для того чтобы картинка никогда не
выделялась как ссылка.Можно сделать так, чтобы на одной картинке было две ссылки и более. Я попробую показать это на примере картинки с двумя телефонами .
Итак нам нужно сделать, чтобы нажимая на левый телефон мы попадали на одну страничку, а на правый, совсем на другую. Для этого мы используем технику, которая называется image map. По сути мы как бы накладываем поверх изображения определенную карту и можем задать каждой ссылке определенные координаты.
Все это реализуется с помощью отдельного тега <map> - Это и есть карта. Мы можем его писать в любом месте страницы, но пишут как правило под изображением сразу, чтобы не путаться. Тег парный и его нужно закрывать. Тегу мы обязательно должы присвоить идентификатор. У меня это id=”forFone” . Обязательно добавляем имя name=”forFone” Далее пишем тег область . Это тег будет определять куда мы перейдем и с каких координат. Так же на него будет реагировать мышь, превращая курсор в указатель ссылки. Вначале указываем атрибут href – то есть куда будет вести ссылка. Второй атрибут это форма области нашей ссылки ( shape) она может быть прямоугольной, круглой и виде многоугольника. Для нашей картинки подойдет прямоугольник – rect . и Последний атрибут это координкаты – cords. Их должно быть четыре. Для того, чтобы понять я подготовил вот такую картинку. Координаты записываются через запятую в такой последовательности ( Х1,У1,Х2,У2)
Для того, чтобы связать нашу карту с картинкой используется атрибут usemap , который прописывают в самом теге картинки и сказать каую карту использовать. Для этого мы и создавали идентификатор id=”forFone”
usemap=”#forFone”
Таким образом, мы с вами добавили одно поле, точно так же можно добавить и другое, вручную. Но эти координаты будут неточными. Для задания более точной карты координат, существует множество платных и бесплатных сервисов. Вот один из них. Этот мне нравится больше всего
Online Image Map Editor. Здесь вообще все просто.
1 - выбираем форму выделяемой области.
2 - вставляем в это окно ссылку куда будет вести эта область.
3- в каком окне будет открываться ссылка (в новом или том же) 4 - прописываем альтернативный текст.
Выделяете области и прямо тут же добавляете ссылку на выделенную область. Прописываете тег alt и получаете готовый код.
Остается только удалить в нем закрывающие теги и ссылку на сервис. Хотя ее можете и оставить, она за комментирована. Ссылка будет со своим идентификатором, который нужно будет прописать в картинке там где мы с вами писали usemap=”#сюда идентификатор”
Пример:
<img
border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgr0k5ERcfPs2dCfMRH2HObVAPJkpFri8pAkQMFtbVjq2SlwGQP5cgMq55FAvyPaDEdmfQlLDC9Vy-4UL__8W36kFDy5wA_fSJ2sbnao6DLbIfWHuLCQOAbKBWhQoz-H916QyarkzcgqDc/s1600/2_links_in_image.jpg"usemap="#imgmap2016526224740"
/>
Вот и все. Сохраняем и наслаждаемся.
Кстати, таким образом можно много чего сделать в блоге. Например, даже собственное меню в виде единой картинки с разными там полями.
Вот пример моего фото и полученной ссылки. красным отметил то что нужно удалить, синим, что изменить , точнее прописать у изображения.
usemap="#imgmap2016526224740"
<map id="imgmap2016526224740" name="imgmap2016526224740">
<area shape="rect" alt="пример 2 ссылки в изображении" title="" coords="12,20,192,365" href="https://www.google.ru/" target="" />(/-Удалить!)
<area shape="rect" alt="2 ссыллки в одном изображении" title="" coords="245,25,391,363" href="https://www.yandex.ru/" target="" />(/-Удалить!)
<!-- Created by Online Image Map Editor (http://www.maschek.hu/imagemap/index) --></map>
Для того, чтобы лучше разобраться с этими кодами, я рекомендую вам прочитать мой пост о ссылках, видах ссылок и изображениях -ссылках.
Удачи вам, друзья.
Спасибо!!!
ОтветитьУдалить