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]; } 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> 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'>"
Comments
Post a Comment