X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

2 страниц V   1 2 >
Открыть тему
Тема закрыта
> позиционирование таблицы
ZhukV
ZhukV
Topic Starter сообщение 24.2.2010, 13:03; Ответить: ZhukV
Сообщение #1


Возник некоторый вопрос.
Есть див, до которго прикрепленно событие наведение курсора. Если курсор наведен, показывает графическую подсказку. Вся графическая подсказка основана на таблице. Когда двигаешся по диву, двигается и подсказка. Прикол в том, что если двигаешся вниз, все путем, а когда вверх, курсор наводится на таблицу подсказки, в результате чего пропадает событие наведение курсора.
Как этого избежать?
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Licoric
Licoric
сообщение 24.2.2010, 13:14; Ответить: Licoric
Сообщение #2


А если подсказку выводить выше на несколько пикселей?
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
locky-yotu
locky-yotu
сообщение 24.2.2010, 13:16; Ответить: locky-yotu
Сообщение #3


Поробуй сделать так, чтобы таблица с подсказкой находилась внутри дива, на котором висит onMouseOver. Типа того:
<div onmouseover="showToolTip()">
<table class="tooltip"> ... </table>
</div>


P.S. Предполагается позиционировать див relative, а таблицу absolute относительно него
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
ZhukV
ZhukV
Topic Starter сообщение 24.2.2010, 13:21; Ответить: ZhukV
Сообщение #4


А если подсказку выводить выше на несколько пикселей?

Я вывожу ее выше на 4 пикселя

<div onmouseover="showToolTip()">
<table class="tooltip"> ... </table>
</div>

Хотел бы это сделать и сам, но старина,, это не возможно. Поскольку я использую события наведение курсора на map->area

Вот примерный код

<img align="right" src="khmel.jpg" usemap="#pogoda" width="200" id="pog" />

<map id="pogoda" name="pogoda">
<area id="123" shape="poly" coords="0,0, 0,300, 200,300, 200,0" href="#" alt="Исландия">
</map>

function createBI(id,text){
    textA='<div class="InfoAlt'+id+'" style="position:absolute; z-index:50;">';
    textA+='<table style=" top: -50px; left: -33px;" id="dpop" cellpadding="0" cellspacing="0"><tbody>';
    textA+='<tr height="15px"><td width="19px" style="background:url(alt/bubble-1.png)"></td><td style="background:url(alt/bubble-2.png) repeat-x"></td><td width="19px" style="background:url(alt/bubble-3.png)"></td></tr>';
    textA+='<tr><td width="19px" style="background:url(alt/bubble-4.png) repeat-y;"></td><td style="background-color:#FFFFFF;" id="text">'+text+'</td><td width="19px" style="background:url(alt/bubble-5.png) repeat-y"></td></tr>';
    textA+='<tr><td width="19px" style="background:url(alt/bubble-6.png) no-repeat; vertical-align:top"></td><td style="background:url(alt/bubble-7.png) repeat-x; text-align:center; vertical-align:top;"><img alt="popup tail" src="alt/bubble-tail2.png" style="display:block; margin: 0 auto;" height="29" width="30" /></td><td width="19px" style="background:url(alt/bubble-8.png) no-repeat;"></td>';
    textA+='</tr></tbody></table></div>';
    jQuery(textA).appendTo('#altMap');
}
function updateBI(id,text){
    jQuery('.InfoAlt'+id+' #text').text(text);
}

createBI('zh','');

jQuery('#pogoda area').mousemove(function(e) {
updateBI('zh',jQuery(this).attr('id'));
h=jQuery('.InfoAltzh').height();
w=jQuery('.InfoAltzh').width();
    jQuery('.InfoAltzh').css({
                top:e.clientY-h-4,
                left:e.clientX-(w/2)
                })
    }
).hover(
    function(){
        jQuery('.InfoAltzh').show()
    },
    function(){
        jQuery('.InfoAltzh').hide()
    }
)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Letmetouchyou
Letmetouchyou
сообщение 24.2.2010, 14:06; Ответить: Letmetouchyou
Сообщение #5


omg
зачем отслеживание события mousemove?
в таких случаях ипользуеться два события: mouseover и mouseout для выода тултипа, и mousemove для изменеий координта тултипа при перемешении мышки. В таком случае никогда курсор не попадет на тултип.

<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
var status=0;
function posTooltip(e){
if (status==1) $('#tooltip').css({
'left':e.pageX+13,
'top':e.pageY-10
});

}
function toggleTooltip(e){
if (status==0){ $('#tooltip').css({
'left':e.pageX+13,
'top':e.pageY-10
});
$('#tooltip').fadeIn('slow');
status=1;
} else {
$('#tooltip').fadeOut('slow');
status=0;
}
}

$(document).ready(function(){
$('#pogoda .first').mouseover(toggleTooltip).mouseout(toggleTooltip);
$('#pogoda .first').mousemove(posTooltip);
});

</script>
<style>
#tooltip {display:none; border:1px solid #000; background:#fff; position:absolute; width:100px;}
</style>
</head>
<body>
<img align="right" src="css/2.png" usemap="#pogoda" width="200" id="pog" />

<map id="pogoda" name="pogoda">
<area class="first" shape="poly" coords="0,0, 0,20, 20,30, 20,0" href="#" alt="Исландия">
</map>
<div id="tooltip">
hi :D I am a tooooltip
</div>
</body>
</html>
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
ZhukV
ZhukV
Topic Starter сообщение 24.2.2010, 14:36; Ответить: ZhukV
Сообщение #6


зачем отслеживание события mousemove?

Одна картинка будет разделена на 20 частей используя мап и ареа.
Я исивиняюсь, возможно некорректно задал вопрос, просто ты дал пости то самой, что и у меня, только у тя подсказка справа, а у меня должна быть сверху
Вот пример
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Letmetouchyou
Letmetouchyou
сообщение 24.2.2010, 14:43; Ответить: Letmetouchyou
Сообщение #7


ZhukV, ну так координты вывода подсказки измени и все.
курсар на нее ни как не попадет.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
ZhukV
ZhukV
Topic Starter сообщение 24.2.2010, 16:03; Ответить: ZhukV
Сообщение #8


Я то поднял на 4 пикселя, но если быстро перетащить мышь, все равно попадает.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Letmetouchyou
Letmetouchyou
сообщение 24.2.2010, 16:13; Ответить: Letmetouchyou
Сообщение #9


ZhukV, че та мне кажеться ч что ты просто что то не рационально там сделал.
на тултипе по идеи не должно быть событий при наведениии.

а если и есть, или просто при наведении на него останавливаеться собыьие наведения на area, то попробуй при наведении на тултип ( которы , по идеи. может проихотйи только случайно ), остановть вспытие (bubbling) или наоборот, сделай только одно вспылтие, или тсолько сколько нужно для того чтобы селектор ДОМ элеентов попал на area.

вот функция до оставки всплытий
function stopBubble(e) {
if ( e && e.stopPropagation )
e.stopPropagation();
else
window.event.cancelBubble = true;
}

мне такое когда то помогло ) толко у меня тултип был дочерним элементом, а утебя походу родителем являетсяь body
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
ZhukV
ZhukV
Topic Starter сообщение 24.2.2010, 16:49; Ответить: ZhukV
Сообщение #10


Вот типа так должно быть.
http://freeboard.km.ua/1/
Правда оп'ять проблемы с ОСЛОМ
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
2 страниц V   1 2 >
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Отсортировать данные таблицы
по дням/часам и тп
3 tube 2309 1.7.2017, 0:38
автор: Shandanakar
Открытая тема (нет новых ответов) Нужно настроить мои Таблицы Google
1 rownong27 2459 25.5.2016, 0:13
автор: -rownong-
Открытая тема (нет новых ответов) Экспорт таблицы с сайта
2 wolf7808 3057 17.10.2015, 9:42
автор: -wolf7808-
Открытая тема (нет новых ответов) размер таблицы
7 modz 6424 24.10.2014, 14:57
автор: -modz-
Открытая тема (нет новых ответов) Как переместить значения ячеек таблицы при клике на первую (Javascript, Ajax, jQuery)
2 anethum 6736 2.9.2013, 13:08
автор: -RayOfLight-


 



RSS Текстовая версия Сейчас: 28.3.2024, 13:32
Дизайн