javascript - When the mouse is over an image onmouseover fails -

i'm working on php page presents data database in table. each column in database cell in table , each column 'atc station'. if active, build ul li , when mouse on cell show more data in central li.

so far good, works perfectlly. problem faced when added image central li , placed mouse on image... go default position mouse on position crazy.

var imgurl = "'https://www.ivao.aero/data/images/ratings/atc/"; var data = ["x"]; var lastdata = ["x"];  // created using php loop of data. data[0] = "amr magdy (430603) <br/><img src=" + imgurl + "5.gif'>"; data[1] = " (0) <br/><img src=" + imgurl + ".gif'>"; data[2] = " (0) <br/><img src=" + imgurl + ".gif'>"; data[3] = " (0) <br/><img src=" + imgurl + ".gif'>"; data[4] = " (0) <br/><img src=" + imgurl + ".gif'>"; data[5] = " (0) <br/><img src=" + imgurl + ".gif'>"; data[6] = " (0) <br/><img src=" + imgurl + ".gif'>"; data[7] = " (0) <br/><img src=" + imgurl + ".gif'>"; data[8] = " (0) <br/><img src=" + imgurl + ".gif'>";  function displaydata(id) {     lastdata[id] = document.getelementbyid(id).innerhtml;     document.getelementbyid(id).innerhtml = document.getelementbyid(id).innerhtml + data[id]; }  function hidedata(id) {     document.getelementbyid(id).innerhtml = lastdata[id]; } 

http://jsfiddle.net/59jfntxs/

here's loop used create data array.

for($i = 0; $i < count($rfe_stands); $i++) {     $data = explode(":", $rfe_stands[$i]['image']);     echo "data[{$i}] = ";echo '"'.$data[2].' ('.$data[0].') <br/><img src="+imgurl+"'.$data[3].".gif'".'>"'; echo";"; } 

edit: here's solution, stefan's help. have changed method both in javascript , php of data decleration easier execute solution.

php loop:

for($i = 0; $i < count($rfe_stands); $i++) {     $data = explode(":", $rfe_stands[$i]['image']);     echo '"'."{$data[2]} (<a onmouseover='displaydata({$i})' onmouseout='hidedata({$i})' href='https://www.ivao.aero/login.aspx?r=member.aspx?id={$data[0]}'>{$data[0]}</a>) <br/><img onmouseover='displaydata({$i})' onmouseout='hidedata({$i})' src='https://www.ivao.aero/data/images/ratings/atc/{$data[3]}.gif' />".'",'; } 

actual code:

<table id="atcon" style="border-spacing: 20px 10px;"> <tr><td class='atconline' onmouseover='displaydata(0)' onmouseout='hidedata(0)'><ul><li>lccc_ctr</li><li id='0'> </li><li>122.800 mhz</li></ul></td><td>llbg_app</td><td>llbg_del</td></tr><tr><td>llbg_e_gnd</td><td>llbg_twr</td><td>llbg_w_gnd</td></tr><tr><td>llll_ctr</td><td>llll_fss</td><td>llsd_twr</td></tr><tr></tr></table> <script>     var lastdata = new array();     var data = new array( "test test (<a onmouseover='displaydata(0)' onmouseout='hidedata(0)' href='https://www.ivao.aero/login.aspx?r=member.aspx?id=390833'>390833</a>) <br/><img onmouseover='displaydata(0)' onmouseout='hidedata(0)' src='https://www.ivao.aero/data/images/ratings/atc/5.gif' />"," (<a onmouseover='displaydata(1)' onmouseout='hidedata(1)' href='https://www.ivao.aero/login.aspx?r=member.aspx?id=0'>0</a>) <br/><img onmouseover='displaydata(1)' onmouseout='hidedata(1)' src='https://www.ivao.aero/data/images/ratings/atc/.gif' />"," (<a onmouseover='displaydata(2)' onmouseout='hidedata(2)' href='https://www.ivao.aero/login.aspx?r=member.aspx?id=0'>0</a>) <br/><img onmouseover='displaydata(2)' onmouseout='hidedata(2)' src='https://www.ivao.aero/data/images/ratings/atc/.gif' />"," (<a onmouseover='displaydata(3)' onmouseout='hidedata(3)' href='https://www.ivao.aero/login.aspx?r=member.aspx?id=0'>0</a>) <br/><img onmouseover='displaydata(3)' onmouseout='hidedata(3)' src='https://www.ivao.aero/data/images/ratings/atc/.gif' />"," (<a onmouseover='displaydata(4)' onmouseout='hidedata(4)' href='https://www.ivao.aero/login.aspx?r=member.aspx?id=0'>0</a>) <br/><img onmouseover='displaydata(4)' onmouseout='hidedata(4)' src='https://www.ivao.aero/data/images/ratings/atc/.gif' />"," (<a onmouseover='displaydata(5)' onmouseout='hidedata(5)' href='https://www.ivao.aero/login.aspx?r=member.aspx?id=0'>0</a>) <br/><img onmouseover='displaydata(5)' onmouseout='hidedata(5)' src='https://www.ivao.aero/data/images/ratings/atc/.gif' />"," (<a onmouseover='displaydata(6)' onmouseout='hidedata(6)' href='https://www.ivao.aero/login.aspx?r=member.aspx?id=0'>0</a>) <br/><img onmouseover='displaydata(6)' onmouseout='hidedata(6)' src='https://www.ivao.aero/data/images/ratings/atc/.gif' />"," (<a onmouseover='displaydata(7)' onmouseout='hidedata(7)' href='https://www.ivao.aero/login.aspx?r=member.aspx?id=0'>0</a>) <br/><img onmouseover='displaydata(7)' onmouseout='hidedata(7)' src='https://www.ivao.aero/data/images/ratings/atc/.gif' />"," (<a onmouseover='displaydata(8)' onmouseout='hidedata(8)' href='https://www.ivao.aero/login.aspx?r=member.aspx?id=0'>0</a>) <br/><img onmouseover='displaydata(8)' onmouseout='hidedata(8)' src='https://www.ivao.aero/data/images/ratings/atc/.gif' />", "");      function displaydata(id)     {         lastdata[id] = document.getelementbyid(id).innerhtml;         document.getelementbyid(id).innerhtml = document.getelementbyid(id).innerhtml + data[id];     }     function hidedata(id)     {         document.getelementbyid(id).innerhtml = lastdata[id];     } </script> 

http://jsfiddle.net/awaszgbs/

also noted code pure html/javascript without css , jquery in website.

thanks help!

i advice use more css code thats personal opinion. if put same onmouseover/out technique on image, resolve problem. on moment put mouse on image, no longer on td tag.

<img onmouseover='displaydata(0)' onmouseout='hidedata(0)'  src=" + imgurl + ".gif'>"