Интерактивная карта с комментарием
Доброго времени суток всем. Надеюсь на вашу помощь. Значит хочу сделать карту при наведении на область которой появлялся бы комментарий в виде div'a. К примеру есть круг, при наведении курсора появляется div в котором находятся картинки, ссылки, текст и прочее прочее. Еще если водить курсором по этой области (кругу) то div передвигается за ним. Наглядный пример: клик клик.
Надеюсь на вашу помощь. п.с. в яве не силен, ибо недавно начал его обучение. |
что-то типа карты отсюда? моя карта
|
Цитата:
|
Это мелочи, главное отличие в том что область наведения подсвечивается и может быть любой формы.
Если делать просто и быстро то область при наведении на которую будет всплывать окно будет прямоугольной. |
Собственно есть очень простой вариант. Например есть некая большая картинка, на неё мы раскидываем прозрачные div над теми местами, на которых необходимо сделать отображение комментария. (дивы должны быть поверх картинки, расположить их можно с помощью position: absolute) Во внуторь этих дивов кладём верстку комментария к текущему диву с классом, например, "comment", со стилем display: none. Дальше всё просто.
$('/*Ваш див*/').hover(function() {
$(this).find('.comment').css('display', 'block');
},function() {
$(this).find('.comment').css('display', 'none');
})
Теперь у нас будет отображаться комментарий. Чтобы заставить его двигаться за курсором Вам бы почитать тут, Будут вопросы - пишите. |
На jQuery и jquery.tipsy.min.js (всплывающие подсказки), есть плагины с более крутыми подсказками http://jquerylist.ru/tooltipe
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Заказ МАР-карт (2) (Единый форум поддержки)</title>
<link rel="stylesheet" type="text/css" href="http://st0.bbcorp.ru/style/extra.14.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="http://st0.bbcorp.ru/js/jquery.tipsy.min.js"></script>
</head>
<body style="padding-top:30px">
<center>
<img src="http://s017.radikal.ru/i420/1112/ec/75a65e6e1237.jpg" width="365" height="481"
border="0" usemap="#mapka">
<map name="mapka" id="Map">
<span class="tipsy-Map" title="Aнкеты"><area shape="rect" coords="141,239,247,267"
href="http://rolevayagrotter.mybb.ru/viewtopic.php?id=5"></span>
<span class="tipsy-Map" title="Правила"><area shape="rect" coords="202,277,308,308"
href="http://rolevayagrotter.mybb.ru/viewtopic.php?id=2"></span>
<span class="tipsy-Map" title="Флуд"><area shape="rect" coords="148,313,219,344"
href="http://rolevayagrotter.mybb.ru/viewforum.php?id=1"></span>
<span class="tipsy-Map" title="Список занятых внешностей"><area shape="rect" coords="216,350,361,376"
href="http://rolevayagrotter.mybb.ru/viewtopic.php?id=35"></span>
<span class="tipsy-Map" title="Вопросы"><area shape="rect" coords="148,385,246,411"
href="http://rolevayagrotter.mybb.ru/viewtopic.php?id=3"></span>
<span class="tipsy-Map" title="Предложения"><area shape="rect" coords="205,421,361,450"
href="http://rolevayagrotter.mybb.ru/viewtopic.php?id=62"></span>
</map></center>
<style>
.tipsy.tipsy-s.Map{
font-size:14px;
z-index:10000!important;
}
</style>
<script>
var offset_On=false;
function mouseShowHandler(e){
e = e || window.event
if(offset_On){ if (e.pageX == null && e.clientX != null ) {
var html = document.documentElement
var body = document.body
e.pageX = e.clientX + (html && html.scrollLeft || body && body.scrollLeft || 0) - (html.clientLeft || 0)
e.pageY = e.clientY + (html && html.scrollTop || body && body.scrollTop || 0) - (html.clientTop || 0)
}
//document.getElementById('mouseX').value = e.pageX
//document.getElementById('mouseY').value = e.pageY
$(".tipsy.tipsy-s.Map").css({"top":(e.pageY-50)+"px","left":(e.pageX-30)+"px"});//offset_On=false;
}}
// nw | n | ne | w | e | sw | s | se
$("#Map .tipsy-Map").tipsy({gravity: 's Map'});
$("#Map .tipsy-Map").mouseover(function(){
offset_On=true;$(document).mousemove(mouseShowHandler)
}).mouseout(function(){
offset_On=false;
});
</script>
</body>
</html>
|
Цитата:
Т.е. если простые дивы сделать, область будет прямоугольной? |
Да, область будет прямоугольной, вы можете сделать хитрость и положить в див картинку (как будто вы выделили область произвольной формы) и подсвечивать её при наведении на див, но в тех местах где див будет за пределами вашей картинки, она будет всеравно подсвечиваться (например в углах, если картинка - круг)
|
Если вы хотите сделать область наведения произвольной формы, то вам надо использовать
<map> <area coords="0,0,0,10,10,10,10,0" class='area1' /> <area ... /> </map> Где area может быть любой формы (туда прописываются координаты точек (x,y,x,y,x,y,...), по которым будет построена фигура области относительно map. Точек может быть сколько угодно).
$('.area1').hover(function() {
//событие при наведении на область в форме квадрата со стороной 10px в левом верхнем углу map
}, function() {
//событие потери наведения
});
Если необходимо подсвечивать область произвольной формы, то надо использовать тег canvas. |
Благодарю, а вот если допустим на картинке кругов 10, код будет выглядеть так?
<map> <area coords="координаты" class='area1' /> <area coords="координаты" class='area2' /> <area coords="координаты" class='area3' /> <area coords="координаты" class='area4' /> <area ... /> </map>
$('.area1').hover(function() {
$(this).find('.comment').css('display', 'block');
}, function() {
$(this).find('.comment').css('display', 'none');
});
$('.area2').hover(function() {
$(this).find('.comment2').css('display', 'block');
}, function() {
$(this).find('.comment2').css('display', 'none');
});
...
и для каждой области свой скрипт, т.е. нельзя написать один скрипт на все комментарии? За ранее огромное спасибо. п.с. а вместо канваса нельзя использовать карту? <area shape="circle" coords="230,340, 100"> |
madwizard,
:) А чем не нравицо мой код ? Комментарии в титлах <area |
Цитата:
|
Цитата:
сейчас немного занят, скоро напишу. |
tsigel,
Обрамить каждый area в span, в span всунуть картинку с position:absolute; top:0;left:0;display:none; Всю карту обернуть в div c position:relative; тогда все картинки будут привязаны к левому верхнему углу карты (Про картинки пост 12) Отслеживаем наведение на span - разворачиваем картинку, при сходе курсора - сворачиваем |
Для того чтобы отображать комментарии в карте с использованием area Вам надо научиться связывать элементы. Это можно делать с помощью data() или можно сделать просто и наглядно.
Добавляем арии и метке одинаковый класс (например <area class='area lebel1' /> будет соответствовать метке <label class='label label1'></label>), тогда мы можем написать:
$('.area').hover(function() {//наведение на область
var class; //Объявляем переменную "class"
class = $(this).attr('class');//записали в переменную класс арии (class = "area lebel1")
class = class.replace('area ', '');//Удалили из переменной класс арии (class = "lebel1")
$('.' + class).css('display', 'block');//показали метку
}, function () {//потеря наведения на арию
$('.label').each(function() {//цикл по всем элементам с классом label
$(this).css('display', 'none');//скрываем все метки
})
})
Конечно можно намного короче, постарался разжевать каждый шаг. Надеюсь что у вас остается понимание кода. |
Цитата:
Мне проще канвасом попользоваться. :) |
Цитата:
|
Цитата:
|
Deff,
А я и не писал, что для канваса нужна привязка, я говорил что можно сделать блоками или, как альтернатива, канвасом и map area. Просто это сложнее и требует больших навыков. Но качество работы того стоит. |
tsigel,
:) Если не нужна - то как канва всплывет в нужной области ?-(вычислять крайние точки по area - геммор) Тут она всплывет в нужном span |
Deff,
Ничего вычислять не надо, все координаты и так есть в ареа, мы просто забираем их в текстовый массив, делим сплитом на цифровые переменные (я назвал этот массив coords). Если канвас совпадает по размеру с картой, то никаких проблем, координаты арии и будут координатами канваса.
function draw(canvas, coords, lineColor, fullColor) {
ctx = canvas.getContext("2d");
ctx.strokeStyle = lineColor;
ctx.fillStyle = fullColor;
ctx.lineWidth = 1;
ctx.beginPath();
ctx.moveTo(coords[0], coords[1]);
for (var i = 2; i < coords.length; i = i + 2) {
ctx.lineTo(coords[i], coords[i + 1]);
}
ctx.stroke();
if (fullColor != null) {
ctx.fill();
}
ctx.closePath();
}
Просто и функционально) (Делал интерактивную карту России) |
Цитата:
Хотя имхо картинкой не сложнее, и чище *часто по пойнтерам в coords более грубый край, нежели реально в самой картинке Карты, поэтому есть ограничения по плавности краёв. Картинка может сгладить эти края и вдобавок, каждой области можно всунуть отмасштабированную в меньшем размере, с увеличением при клике(где уже видны: города - заводы улицы и .т.д) Вообще занимался впихиванием фреймом гугол-карты в области |
Deff,
Нууу... Тут как сказать, я бы не сказл что Ваш вриант лучше, большое количество картинок увеличивает вес сайта, он дольше грузится, необходимо догружать картинки, чтобы они не мигали при первом наведении (если они дисплей нун). И нужно делать кучу картинок. С другой стороны канвас медленно работает в ИЕ (и то только со скриптом) и т.д. Каждый делает так как ему удобнее, мне было удобнее так ;) |
Цитата:
У Deff'a карта отличная, почти то что нужно, но комментарий там просто текст, а не блок с элементами =( надеюсь до меня дойдет, как все это делать =( |
например так:
<div class='labels'> <div class='label label1'>...</div> <div class='label label2'>...</div> <div class='label label3'>...</div> <div class='label label4'>...</div> </div> <map> <area class='area label1' coords='...' /> <area class='area label2' coords='...' /> <area class='area label3' coords='...' /> <area class='area label4' coords='...' /> </map> Тогда скрипт можно немного оптимизировать, чтобы пошустрее бегал:
var map = $('map'),
labels = $('.labels');
map.find('.area').hover(function() {//наведение на область
var class; //Объявляем переменную "class"
class = $(this).attr('class');//записали в переменную класс арии (class = "area lebel1")
class = class.replace('area ', '');//Удалили из переменной класс арии (class = "lebel1")
labels.find('.' + class).css('display', 'block');//показали метку
}, function () {//потеря наведения на арию
labels.find('.label').each(function() {//цикл по всем элементам с классом label
$(this).css('display', 'none');//скрываем все метки
})
})
Разница в том, что когда мы создали переменные мы сделали ссылки на конкретные элементы в документе и ищем area и label не во всем документе а в конкретных местах. |
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<style>
.area {
margin: 50px;
width: 150px;
height: 100px;
background-color: rgb(255, 222, 173);
}
.label {
background-color: rgb(250, 240, 230);
width: 40px;
height: 20px;
position: absolute;
margin: -20px -10px 0 0;
display:none;
}
</style>
<div class='area'></div>
<div class='label'></div>
<script>
function muve(e) {
$('.label').css({
'left' : e.pageX + 5,
'top' : e.pageY + 5
})
}
$('.area').hover(function(e) {
$(document).bind('mousemove', muve);
$('.label').css({
'display' : 'block',
'left' : e.pageX,
'top' : e.pageY
})
}, function() {
$(document).unbind('mousemove', muve);
$('.label').css('display', 'none');
})
</script>
Это должно навести вас на мысли как сделать подвижную метку. Будут вопросы - пишите! |
| Часовой пояс GMT +3, время: 08:12. |