Интерактивная карта с комментарием
Доброго времени суток всем. Надеюсь на вашу помощь. Значит хочу сделать карту при наведении на область которой появлялся бы комментарий в виде 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"> |
| Часовой пояс GMT +3, время: 03:58. |