К списку форумов К списку тем
Регистрация    Правила    Главная форума    Поиск   
Имя: Пароль:
Начальная Романовская гимназия
Рекомендовать в новости

С помощью какой технологии реализовать изображение карту

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


К списку вопросов
Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск




Copyright ©, Все права защищены