Форум русской поддержки Joomla!® CMS
07.12.2016, 18:23:44 *
Добро пожаловать, Гость. Пожалуйста, войдите или зарегистрируйтесь.
Вам не пришло письмо с кодом активации?

Войти
   
   Начало   Поиск Joomla 3.0 FAQ Joomla 2.5 FAQ Joomla 1.5 FAQ Правила форума Новости Joomla Реклама Войти Регистрация Помощь  
Страниц: [1]   Вниз
  Добавить закладку  |  Печать  
Автор

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

 (Прочитано 395 раз)
0 Пользователей и 1 Гость смотрят эту тему.
dimat84
Завсегдатай
*****

Репутация: +20/-0
Offline Offline

Пол: Мужской
Сообщений: 572



« : 15.07.2015, 17:13:03 »

Добрый вечер
Подскажите как сделать метки с ссылками на картинке?

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

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

Репутация: +316/-3
Offline Offline

Пол: Мужской
Сообщений: 6457



« Ответ #1 : 15.07.2015, 18:35:45 »

все метки - ссылками? ссылки делайте блоковыми, с абсолютным позиционированием, размерами и картинкой беграундом
Записан
dimat84
Завсегдатай
*****

Репутация: +20/-0
Offline Offline

Пол: Мужской
Сообщений: 572



« Ответ #2 : 15.07.2015, 19:00:59 »

Спасибо ) попробую
Записан
neogeek
Давно я тут
****

Репутация: +18/-2
Offline Offline

Сообщений: 212


« Ответ #3 : 15.07.2015, 19:34:23 »

Подскажите как сделать? Чтоб метки не изменяли потом позицию при изменении окна браузера (уменьшении картинки).
Если абсолютно позиционировать, то не прокатит.
Может поможет - http://htmlbook.ru/html/area
Записан
dimat84
Завсегдатай
*****

Репутация: +20/-0
Offline Offline

Пол: Мужской
Сообщений: 572



« Ответ #4 : 15.07.2015, 21:44:06 »

Засада.... нифига не получается )))
Записан
AlekVolsk
Профи
********

Репутация: +316/-3
Offline Offline

Пол: Мужской
Сообщений: 6457



« Ответ #5 : 15.07.2015, 23: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
Давно я тут
****

Репутация: +18/-2
Offline Offline

Сообщений: 212


« Ответ #6 : 16.07.2015, 10:17:58 »

Почему же не прокатит?
Потому что при ресайзе картинки метка останется на том же месте. Смотрите прикрепленную картинку.


* example.jpg (18.05 Кб, 800x600 - просмотрено 82 раз.)
« Последнее редактирование: 16.07.2015, 10:22:06 от neogeek » Записан
AlekVolsk
Профи
********

Репутация: +316/-3
Offline Offline

Пол: Мужской
Сообщений: 6457



« Ответ #7 : 16.07.2015, 11:27:52 »

так задавайте позицию в метке в %%
Записан
Страниц: [1]   Вверх
  Добавить закладку  |  Печать  
 
Перейти в:  

Powered by SMF 1.1.21 | SMF © 2006, Simple Machines

Joomlaforum.ru is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.
The Joomla! name and logo is used under a limited license granted by Open Source Matters
the trademark holder in the United States and other countries.

LiveInternet