Помощник
|
позиционирование таблицы |
ZhukV
|
Сообщение
#1
|
||
|
|
||
|
|||
Licoric |
24.2.2010, 13:14;
Ответить: Licoric
Сообщение
#2
|
|
А если подсказку выводить выше на несколько пикселей?
|
|
|
locky-yotu |
24.2.2010, 13:16;
Ответить: locky-yotu
Сообщение
#3
|
|
Поробуй сделать так, чтобы таблица с подсказкой находилась внутри дива, на котором висит onMouseOver. Типа того:
<div onmouseover="showToolTip()"> <table class="tooltip"> ... </table> </div> P.S. Предполагается позиционировать див relative, а таблицу absolute относительно него |
|
|
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 |
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
|
Сообщение
#6
|
|
зачем отслеживание события mousemove? Одна картинка будет разделена на 20 частей используя мап и ареа. Я исивиняюсь, возможно некорректно задал вопрос, просто ты дал пости то самой, что и у меня, только у тя подсказка справа, а у меня должна быть сверху Вот пример |
|
|
Letmetouchyou |
24.2.2010, 14:43;
Ответить: Letmetouchyou
Сообщение
#7
|
|
ZhukV, ну так координты вывода подсказки измени и все.
курсар на нее ни как не попадет. |
|
|
ZhukV
|
Сообщение
#8
|
|
Я то поднял на 4 пикселя, но если быстро перетащить мышь, все равно попадает.
|
|
|
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
|
Сообщение
#10
|
|
|
|
|
|
Похожие темы
Тема | Ответов | Автор | Просмотров | Последний ответ | |
---|---|---|---|---|---|
Отсортировать данные таблицы по дням/часам и тп |
3 | tube | 2350 | 1.7.2017, 0:38 автор: Shandanakar |
|
Нужно настроить мои Таблицы Google | 1 | rownong27 | 2463 | 25.5.2016, 0:13 автор: -rownong- |
|
Экспорт таблицы с сайта | 2 | wolf7808 | 3068 | 17.10.2015, 9:42 автор: -wolf7808- |
|
размер таблицы | 7 | modz | 6426 | 24.10.2014, 14:57 автор: -modz- |
|
Как переместить значения ячеек таблицы при клике на первую (Javascript, Ajax, jQuery) | 2 | anethum | 6751 | 2.9.2013, 13:08 автор: -RayOfLight- |
Текстовая версия | Сейчас: 18.4.2024, 9:13 |