| 0
- 24.09.2015 - 07:41
|
Имеем (например jpg) картинку с картой, например карта области Добавить на карту другие картинки с прозрачным фоном обозначающие точки на карте (например gif что бы они мерцали при наведении) При клике на точке карты (рядом с точкой на той же карте) вываливается столбец (список пунктов 1. ..... 2.....3.... и тд). Скажите что лучше использовать для реализации? или Дайте ссылку на похожий пример или скажите как лучше     | |
| 1
- 24.09.2015 - 10:56
|
Если делать так как написали - тогда можно просто с помощью CSS! 1) Ставим Дивку в размер карты и Карту кладем ему фоном. background:url(путь к файлу Карты) repeat-x; 2) Точки - тоже делаем дивами и расставляем их с помощью position:absolute; и отступов от краев top:, left:, right:, bottom:. И к стати их можно сделать и не Гифками, а так же поместить фоном и заменять картинку при неведении :hover 3)Список пунктов делаем как Выпадающее Меню. Вначале position:absolute; left:-9999px; (прячем за экран) А при наведении на Точку left:0; (возвращаем на экран). Вот и все - Тогда даже по точкам кликать не надо будет! | |
| 2
- 24.09.2015 - 13:13
|
0-SergeySS >Вот как просто можно решить вашу задачу! <style> .box_map {width:25px; height:25px; border-radius:25px; border:solid 5px #f00; text-align:center; line-height:25px; background:#fff; cursor:pointer;** .box_map div {position:absolute; left:-9999px; top:20px; width:120px; border:solid 1px #000; border-radius:8px; background:#fff; padding:10px;** .box_map:hover {border-color:#0f0;** .box_map:hover div{left:25px;** </style> <div style="width:700px; height:600px; background:url(http://comp23.ru/images/new_year/ded-top.png) no-repeat 50% 50%; padding:0; position:relative; display:block;"> <div class="box_map" style="position:absolute; top:100px; left:430px;">1 <div>Вот смотри внучек!<br />Эти Дядьки, с МКС<br />У нас оленей увели!</div> </div> <div class="box_map" style="position:absolute; bottom:300px; left:350px;">2 <div>Деда они у нас<br />их на прокат взяли<br />Пока к ним ПРОГРЕСС с горючкой не прилетит!</div> </div> <div class="box_map" style="position:absolute; top:190px; right:240px;">3 <div>А тогда Мешок мой с подарками<br />Где ?</div> </div> </div> Думаю Картинки сами подложите! | |
| 3
- 24.09.2015 - 19:45
| Скорее, имелось ввиду интерактивная карта, тогда либо api яндекс карт, или api google maps... | |
| 4
- 24.09.2015 - 19:50
| http://webmap-blog.ru/yandex-maps/so...ndeks-kart-2-x | |
| 5
- 25.09.2015 - 05:29
|
1 и 2 это как раз то что нужно, даже больше 3 и 4 это не то, больше интересует как карту из гугла в картинку извлечь, чем вставить туда свою. | |
| 6
- 25.09.2015 - 11:21
|
Карту Гугла в картинку обычный PrintScrin извлекает :) А все остальное - обычная Верстка! Кстати списки можно выводить с разных сторон http://www.comp23.ru/demo/progress.html Там текст № 3 отображается слева, а в код добавляется всего одна строчка - .box_map_left:hover div{left:-143px;** И в Диве ставим - class="box_map box_map_left" Вот и все - Удачи в реализации проекта! | |
| 7
- 25.09.2015 - 15:15
| 5-SergeySS >sas.planet | |
Интернет-форум Краснодарского края и Краснодара |
