2013-11-09 2 views
0

Почему этот код не работает с firefox и т. Д.? Я использую то есть 10 и firefox 25, с хромом это работает без проблем. Firefox показывает div, но не в правильном положении (координаты мыши).onmouseover область показывает содержимое div в координатах мыши

Javascript:

<script> 
    function show(id) { 
     document.getElementById(id).style.display = "block"; 
     var topPixel = event.clientY; 
     var leftPixel = event.clientX; 
     document.getElementById(id).style.top = topPixel + "px"; 
     document.getElementById(id).style.left = leftPixel + "px"; 
    }; 
    function hide(id) { 
     document.getElementById(id).style.display = "none"; 
    }; 
</script> 

CSS-код:

<style> 
.show {display: none;position:absolute;} 
</style> 

HTML, с PHP ($ данные правильно прочитать):

<img src="picture.jpg" width="100" height="100" border="0" alt="img" usemap="#img"> 
<map name="img"> 
<?php while ($data = mysql_fetch_array($db_erg, MYSQL_ASSOC)) { ?>  
    <area shape="rect" coords="10,10,30,30" href="" alt="#" title="" onmouseover="show('<?php echo $data['id'];?>');" onmouseout="hide('<?php echo $data['id'];?>');" /> 
    <div class="show" id="<?php echo $data['id'];?>"> 
     <?php echo $data['text'];?> 
    </div> 
<?php } ?> 
</map> 

Функция: ДИВ с соответствующими содержимое и координаты мыши должны быть открыты, когда мышь находится на области.

+0

jsfiddle pls? http://jsfiddle.net/ – dbanet

+0

Проблема была вне сферы действия, указанной в вопросе, и вряд ли будет воспроизведена в будущем. –

ответ

0

http://jsfiddle.net/tX25a/2/

div=document.getElementsByTagName('div')[0]; 
btShow=document.getElementsByTagName('button')[0]; 
btHide=document.getElementsByTagName('button')[1]; 
btShow.onclick=function(){ 
    document.body.onmousemove=function(event){ 
     var e=event||window.event; 
     div.style.left=e.clientX+"px"; 
     div.style.top=e.clientY+"px"; 
    } 
    div.style.display="block"; 
} 
btHide.onclick=function(){ 
    document.body.onmousemove=function(){}; 
    div.style.display="none"; 
} 

работает для меня на FF17ESR, OS/2, должен работать на IE и WebKit, а также. Если вы хотите, чтобы блок исчезал onmouseout и отображался onmouseover, а не на нажатиях кнопок, то просто определяйте правильные обработчики событий.

+0

ok thx on firefox это работает, но не работает – lockheed

+0

@ user2961059 почему? вы проверили? 'e = event || window.event' - рекомендуемый способ получить объект события в IE. Что не удается? Могу ли я иметь консольный журнал? – dbanet

+0

ваш скрипт отлично работает, я думаю, что это проблема с прочитанным id – lockheed

Смежные вопросы