Вход

Просмотр полной версии : Корректная обработка команды OnMouseOver


JustCrazy
20.07.2012, 09:08
Доброго времени суток всем, у меня вопрос такого характера:
есть таблица, допустим 2 ячейки, когда курсор на одной, всплывает подсказка с изображением, когда курсор на другой - другая подсказка с изображением. Изображение припаять получилось, а вот с текстом беда...
<script type="text/javascript" >
function name(file_name)
{
img = document.createElement('div');
document.body.appendChild(img);
img.innerHTML = '<img src='+file_name+' />';
img.style.position = 'absolute';
img.style.background = '#FFFFFF';
img.style.border = 'solid 1px #346fdc';
img.style.padding = '2px';
move();
}
function move(e)
{
e = e || window.event
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)
}
img.style.left = e.pageX + 15 + 'px';
img.style.top = e.pageY + 15 + 'px';
}
function out()
{
document.body.removeChild(img);
}
</script>

дальше собственно к ячейке делаю привязку

<td width="50%" onmouseover="name('image.jpg')" onmousemove="move(event)" onmouseout="out()" ></td>

текст привязать пробовал так:
img.innerHTML = 'текст <img src='+file_name+' />';
но если у меня в таблице ячеек 500, не буду же я к каждой ячейке отдельную функцию делать...
помогите доразобраться:help:

bes
20.07.2012, 09:46
Вещайте обработчики на саму таблицу (см. делегирование событий).

JustCrazy
20.07.2012, 15:47
Вещайте обработчики на саму таблицу (см. делегирование событий)
а можно немного поподробнее ? мануалы почитал, на бональных примерах вроде все просто, а как сам что то пытаюсь - темный лес..

bes
20.07.2012, 18:34
События всплывают поэтому можно обработать их не на самих элементах, а на родителе.
http://learn.javascript.ru/event-delegation

<style>
td {
border: solid 1px;
cursor: pointer;
}
</style>

<table id="table">
<tr>
<td>11</td>
<td>12</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
</tr>
</table>

<script>
window.onload = function () {
var table = document.getElementById('table');

table.onclick = function (e) {
e = e || event;
var target = e.target || e.srcElement;
if (target.parentNode.tagName == 'TR') {
alert(target.innerHTML);
}
}

}
</script>