Корректная обработка команды OnMouseOver

[JustCrazy]

Доброго времени суток всем, у меня вопрос такого характера:
есть таблица, допустим 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, не буду же я к каждой ячейке отдельную функцию делать...
помогите доразобраться

[bes]

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

[JustCrazy]

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

а можно немного поподробнее ? мануалы почитал, на бональных примерах вроде все просто, а как сам что то пытаюсь - темный лес..

[bes]

События всплывают поэтому можно обработать их не на самих элементах, а на родителе.
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>