Метки на картинке

  • 7 Ответов
  • 528 Просмотров

0 Пользователей и 1 Гость просматривают эту тему.

*

Оффлайн dimat84

Метки на картинке
« : 15.07.2015, 18:13:03 »
Добрый вечер
Подскажите как сделать метки с ссылками на картинке?

Например: будет большая нарисованная карта, и на ней надо разместить к примеру 50 меток с ссылками и чтоб каждая метка находилась на определенном месте этой картинки.
Думал у позиции сделать background-image с этим рисунком, создать там модуль HTML с ссылками, к каждой ссылке свой стиль и указать для каждой как-то координаты...
или просто вставить картинку и каждой ссылке указать позицию типа: top: 5px;, left: 200px; .....

Подскажите как сделать? Чтоб метки не изменяли потом позицию при изменении окна браузера (уменьшении картинки).

*

Онлайн AlekVolsk

Re: Метки на картинке
« Ответ #1 : 15.07.2015, 19:35:45 »
все метки - ссылками? ссылки делайте блоковыми, с абсолютным позиционированием, размерами и картинкой беграундом

*

Оффлайн dimat84

Re: Метки на картинке
« Ответ #2 : 15.07.2015, 20:00:59 »
Спасибо ) попробую

*

Оффлайн neogeek

Re: Метки на картинке
« Ответ #3 : 15.07.2015, 20:34:23 »
Подскажите как сделать? Чтоб метки не изменяли потом позицию при изменении окна браузера (уменьшении картинки).
Если абсолютно позиционировать, то не прокатит.
Может поможет - http://htmlbook.ru/html/area

*

Оффлайн dimat84

Re: Метки на картинке
« Ответ #4 : 15.07.2015, 22:44:06 »
Засада.... нифига не получается )))

*

Онлайн AlekVolsk

Re: Метки на картинке
« Ответ #5 : 16.07.2015, 00:53:51 »
Почему же не прокатит?
Задаете класс для стилизации самой метки, координаты вывода - инлайном прописывайте, у непосредственного родителя ссылок position:relative; для обработки ссылок на js добавьте каждой ссылке уникальный id
<a id="mappark123" class="mapmark" style="left:5px;top:5px;"></a>

.mapmark {
  display: inline-block;
  position: absolute;
  width: 15px;
  heght: 20px;
  background: url('картинка') center center no-repeat;
}

*

Оффлайн neogeek

Re: Метки на картинке
« Ответ #6 : 16.07.2015, 11:17:58 »
Почему же не прокатит?
Потому что при ресайзе картинки метка останется на том же месте. Смотрите прикрепленную картинку.
« Последнее редактирование: 16.07.2015, 11:22:06 от neogeek »

*

Онлайн AlekVolsk

Re: Метки на картинке
« Ответ #7 : 16.07.2015, 12:27:52 »
так задавайте позицию в метке в %%