當鼠標懸停在圖像onmouseover失敗

我正在從一個表中的數據庫呈現數據的PHP頁面。數據庫中的每一列都是表格中的一個單元格，每列都是'ATC Station'。如果它處於活動狀態，則生成ul li，並且當鼠標移過時，單元格會在中央li顯示更多數據。當鼠標懸停在圖像onmouseover失敗

到目前爲止，一切都很完美。我面臨的問題是，當我將圖像添加到中央李，然後將我的鼠標放在圖像上... 它會從默認位置到鼠標位置像瘋了似的。

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/

這裏的for循環我用於創建數據數組。

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";"; 
}

編輯：這裏的解決方案，與Stefan的幫助。我已經改變了JavaScript和PHP數據刪除的方法，所以執行他的解決方案會更容易。

PHP for循環：

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' />".'",'; 
}

實際代碼：

<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/

另外要注意的是，這個代碼是純HTML/JavaScript的沒有在我的網站的CSS和jQuery 。

感謝您的幫助！

來源

2015-06-19 Ofir

現在請告訴我當編輯試圖將鏈接發佈到jsfiddle作爲正常鏈接時，編輯器發出了什麼警告！ ** - ** 1。 – nicael

我認識的人，我試了好幾個小時才設置好，你能幫我嗎？ – Ofir

在幫助菜單中，它沒有解釋關於jsfiddle的任何信息。 – Ofir

我會建議使用更多的CSS代碼，但那是個人意見。如果您在圖片上放置了相同的鼠標懸停/跳出技巧，這可以解決問題。在你將鼠標放在圖像上的那一刻，你不再在td標籤上。

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

來源

2015-06-19 14:22:52 Stefan

呃？ 'echo'data [{$ i}] =「; echo'」'。$ data [2]。' （'。$ data [0]。'）
「';' – Stefan

當鼠標懸停在圖像onmouseover失敗

回答

相關問題