当鼠标悬停在图像上时，鼠标悬停失败

Question

I'm working on a PHP page that presents data from a database in a table. Each column in the database is a cell in the table and each column is an 'ATC Station'. If it is active, build ul li and when the mouse is over the cell show more data in the central li.

So far so good, everything works perfectlly. The problem I faced is when I added an image to the central li and then placed my mouse over the image... It would go from default position to mouse over position like crazy.

var imgURL = "'https://www.ivao.aero/data/images/ratings/atc/";
var data = ["x"];
var lastData = ["x"];

// This is created using a PHP for loop of all 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 the for loop I used to create the 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 the solution, with Stefan's help. I have changed the method both in JavaScript and PHP of data decleration so it will be easier to execute his solution.

PHP for 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 to be noted that this code is pure HTML/JavaScript without the CSS and Jquery in my website.

Thanks for the help!

Answer 1

I would advice to use more CSS code but thats a personal opinion. If you put the same onmouseover/out technique on your image, this would resolve the problem. On the moment you put your mouse on the image, you are no longer on the td tag.

<img onmouseover='displayData(0)' onmouseout='hideData(0)'  src=" + imgURL + ".gif'>"