使用onmouseover和onmouseoff與圖像來改變文字

Question

我有6個圖像，我希望改變他們旁邊的文本，基於哪個圖像是用鼠標「懸停」。

我嘗試使用JavaScript與onmouseover和onmouseout事件，使用一些代碼直接複製工作示例，但我的代碼目前不工作。

這裏是一個的jsfiddle：https://jsfiddle.net/schanz/xh4pb9n6/

此外，這裏是原始代碼：`

<h3>Cruise Destinations</h3> 
<table> 
    <tr> 
    <td> 
     <img src="http://i.imgur.com/tPJGobK.jpg?1" onmouseover="onHover(0)" onmouseout="offHover()"> 
    </td> 

    <td> 
     <img src="http://i.imgur.com/syWPecu.png" onmouseover="onHover(1)" onmouseout="offHover()"> 
    </td> 

    <td> 
     <img src="http://i.imgur.com/sESpwWx.jpg?1" onmouseover="onHover(2)" onmouseout="offHover()"> 
    </td> 

    <td colspan="2" > 
     <p id='textField'>Mouse over an image to learn about that destination.</p> 
    </td> 
    </tr> 
    <td> 
     <img src="http://i.imgur.com/zFnhhv2.jpg?1" onmouseover="onHover(3)" onmouseout="offHover()"> 
    </td> 

    <td> 
     <img src="http://i.imgur.com/WAYyBmv.jpg?1" onmouseover="onHover(4)" onmouseout="offHover()"> 
    </td> 

    <td> 
     <img src="http://i.imgur.com/ZbwvBDE.jpg?1" onmouseover="onHover(5)" onmouseout="offHover()" > 
    </td> 

    <tr> 
    </tr> 
</table> 
<script> 

var textFields = ["Stellwagen Bank offers thrilling whale-watching opportunities.", 
       "Hyannis is filled with great food and fun clubs in a downtown setting.", 
       "Falmouth is perfect for beach-lovers.", 
       "Oak Bluffs feature some of Massachusetts best cottages.", 
       "Nantucket is one of our favorites and we think you will love it too.", 
       "Plymouth rock is a must for history buffs."]; 
function onHover(num) { 
    document.getElementById('textField').innerhtml = textFields[num]; 
} 

function offHover() { 
    document.getElementById('textField').innerhtml = 
    "Mouse over an image to learn about that destination."; 
} 



</script> 

`

Answer 1

。在你的JavaScript中的錯字。它應該是innerHTML而不是innerhtml。

Answer 2

首先，您不應該使用內聯HTML事件屬性，如onmouseover和onmouseout。始終將您的JavaScript從HTML中分離出來。 [這是爲什麼。]1

其次，不要使用表格進行頁面佈局。他們應該只用於表格數據表示。

三，你有一個錯字.innerhtml，應該是innerHTML。但是，由於您實際上沒有提供任何HTML，因此您應該使用textContent，因爲HTML解析器不需要執行任何解析，所以性能更好。

如果您只是將所有圖像元素收集到一個數組中，則可以將被挖出的圖像的索引映射到字符串數組中的正確字符串。

var textFields = ["Stellwagen Bank offers thrilling whale-watching opportunities.", 
 
       "Hyannis is filled with great food and fun clubs in a downtown setting.", 
 
       "Falmouth is perfect for beach-lovers.", 
 
       "Oak Bluffs feature some of Massachusetts best cottages.", 
 
       "Nantucket is one of our favorites and we think you will love it too.", 
 
       "Plymouth rock is a must for history buffs.", 
 
       "Mouse over an image to learn about that destination."]; 
 
       
 
// Get reference to output area 
 
var output = document.getElementById("caption"); 
 

 
// Set the default text for the output to be the last string in the array. 
 
output.textContent = textFields[textFields.length-1]; 
 

 
// Get all the images as an array 
 
var imgs = Array.prototype.slice.call(document.querySelectorAll("img")); 
 

 
// Loop through the images... 
 
imgs.forEach(function(img, index){ 
 
    // Assign a mouseover event handler... 
 
    img.addEventListener("mouseover", function(){ 
 
    // Set the output to the index in the strings array that matches the 
 
    // index of the image being moused over. 
 
    output.textContent = textFields[index]; 
 
    }); 
 
    
 
    // Assign a mouseout event handler... 
 
    img.addEventListener("mouseout", function(){ 
 
    // Reset the output 
 
    output.textContent = textFields[textFields.length-1]; 
 
    }); 
 

 
});

<h3>Cruise Destinations</h3> 
 

 
<div id="images"> 
 
    <div class="row"> 
 
    <img src="http://i.imgur.com/tPJGobK.jpg"> 
 
    <img src="http://i.imgur.com/syWPecu.png"> 
 
    <img src="http://i.imgur.com/sESpwWx.jpg"> 
 
    </div> 
 
    <div class="row"> 
 
    <img src="http://i.imgur.com/zFnhhv2.jpg"> 
 
    <img src="http://i.imgur.com/WAYyBmv.jpg"> 
 
    <img src="http://i.imgur.com/ZbwvBDE.jpg"> 
 
    </div> 
 
</div> 
 
<p id='caption'></p>