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

dimat84

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

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

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

AlekVolsk

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

dimat84

  • Завсегдатай
  • 521
  • 20
Re: Метки на картинке
« Ответ #2 : 15.07.2015, 18:00:59 »
Спасибо ) попробую
*

neogeek

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

dimat84

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

AlekVolsk

  • Профи
  • 6312
  • 336
Re: Метки на картинке
« Ответ #5 : 15.07.2015, 22: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

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

AlekVolsk

  • Профи
  • 6312
  • 336
Re: Метки на картинке
« Ответ #7 : 16.07.2015, 10:27:52 »
так задавайте позицию в метке в %%
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

Модуль«Похожие метки» обрезка текста и мн

Автор leo78

Ответов: 1
Просмотров: 415
Последний ответ 01.03.2017, 15:03:40
от leo78
Возможно применить стиль только к первой картинке без использования дополнительного класса?

Автор sprint007

Ответов: 2
Просмотров: 500
Последний ответ 13.12.2014, 17:38:38
от sprint007
Как подключить к картинке новый стиль CSS?

Автор igorvolg

Ответов: 2
Просмотров: 1210
Последний ответ 25.08.2013, 22:18:56
от igorvolg
Как сделать меню? чтобы отображалось показал на картинке?

Автор passavlasso

Ответов: 2
Просмотров: 466
Последний ответ 02.08.2013, 17:58:56
от passavlasso
Метки для товаров! Как отобразить?

Автор StyleRocket

Ответов: 2
Просмотров: 888
Последний ответ 04.12.2012, 14:38:39
от robert