05.02.2013, 13:51
|
|
Новичок на форуме
|
|
Регистрация: 05.02.2013
Сообщений: 5
|
|
|
Интерактивная карта с комментарием
Доброго времени суток всем. Надеюсь на вашу помощь. Значит хочу сделать карту при наведении на область которой появлялся бы комментарий в виде div'a. К примеру есть круг, при наведении курсора появляется div в котором находятся картинки, ссылки, текст и прочее прочее. Еще если водить курсором по этой области (кругу) то div передвигается за ним. Наглядный пример: клик клик.
Надеюсь на вашу помощь.
п.с. в яве не силен, ибо недавно начал его обучение. |
|
05.02.2013, 14:54
|
|
Профессор
|
|
Регистрация: 12.12.2012
Сообщений: 1,398
|
|
что-то типа карты отсюда? моя карта
Последний раз редактировалось tsigel, 05.02.2013 в 15:13.
|
|
05.02.2013, 16:15
|
|
Новичок на форуме
|
|
Регистрация: 05.02.2013
Сообщений: 5
|
|
Сообщение от tsigel
|
|
что-то типа карты отсюда? моя карта
|
У Вас комментарий выводится под графиком, мне же надо чтобы он следовал за курсором в определенной области. Ссылка на пример указана в 1-ом посте. |
|
05.02.2013, 16:20
|
|
Профессор
|
|
Регистрация: 12.12.2012
Сообщений: 1,398
|
|
|
Это мелочи, главное отличие в том что область наведения подсвечивается и может быть любой формы.
Если делать просто и быстро то область при наведении на которую будет всплывать окно будет прямоугольной.
|
|
05.02.2013, 16:27
|
|
Профессор
|
|
Регистрация: 12.12.2012
Сообщений: 1,398
|
|
Собственно есть очень простой вариант. Например есть некая большая картинка, на неё мы раскидываем прозрачные div над теми местами, на которых необходимо сделать отображение комментария. (дивы должны быть поверх картинки, расположить их можно с помощью position: absolute) Во внуторь этих дивов кладём верстку комментария к текущему диву с классом, например, "comment", со стилем display: none. Дальше всё просто.
$('/*Ваш див*/').hover(function() {
$(this).find('.comment').css('display', 'block');
},function() {
$(this).find('.comment').css('display', 'none');
})
Теперь у нас будет отображаться комментарий. Чтобы заставить его двигаться за курсором Вам бы почитать тут, Будут вопросы - пишите.
Последний раз редактировалось tsigel, 05.02.2013 в 16:31.
|
|
05.02.2013, 17:04
|
|
без статуса
|
|
Регистрация: 25.05.2012
Сообщений: 8,219
|
|
На 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>
Последний раз редактировалось Deff, 05.02.2013 в 17:09.
|
|
06.02.2013, 11:47
|
|
Новичок на форуме
|
|
Регистрация: 05.02.2013
Сообщений: 5
|
|
|
Сообщение от tsigel
|
Собственно есть очень простой вариант. Например есть некая большая картинка, на неё мы раскидываем прозрачные div над теми местами, на которых необходимо сделать отображение комментария. (дивы должны быть поверх картинки, расположить их можно с помощью position: absolute) Во внуторь этих дивов кладём верстку комментария к текущему диву с классом, например, "comment", со стилем display: none. Дальше всё просто.
$('/*Ваш див*/').hover(function() {
$(this).find('.comment').css('display', 'block');
},function() {
$(this).find('.comment').css('display', 'none');
})
Теперь у нас будет отображаться комментарий. Чтобы заставить его двигаться за курсором Вам бы почитать тут, Будут вопросы - пишите.
|
А если места над которыми должен быть комментарий круглые?
Т.е. если простые дивы сделать, область будет прямоугольной? |
|
06.02.2013, 12:11
|
|
Профессор
|
|
Регистрация: 12.12.2012
Сообщений: 1,398
|
|
|
Да, область будет прямоугольной, вы можете сделать хитрость и положить в див картинку (как будто вы выделили область произвольной формы) и подсвечивать её при наведении на див, но в тех местах где див будет за пределами вашей картинки, она будет всеравно подсвечиваться (например в углах, если картинка - круг)
|
|
06.02.2013, 12:18
|
|
Профессор
|
|
Регистрация: 12.12.2012
Сообщений: 1,398
|
|
Если вы хотите сделать область наведения произвольной формы, то вам надо использовать
<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.
Последний раз редактировалось tsigel, 06.02.2013 в 13:22.
|
|
06.02.2013, 15:46
|
|
Новичок на форуме
|
|
Регистрация: 05.02.2013
Сообщений: 5
|
|
Благодарю, а вот если допустим на картинке кругов 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, 06.02.2013 в 16:26.
|
|
|
|
