使用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>