Question

我有6张图片，我希望根据正在拍摄的图像更改旁边的文字＆＃34;用鼠标结束。

我尝试使用带有onmouseover和onmouseout事件的JavaScript来执行此操作，其中一些代码直接来自工作示例，但我的代码目前无效。

这是一个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分开。 [这里＆＃39;为什么。] 1

其次，不要使用表格进行页面布局。它们应该只用于表格数据表示。

第三，你有.innerhtml的拼写错误，应该是innerHTML。但是，由于您实际上并没有提供任何HTML，因此您应该使用textContent，因为HTML解析器不需要进行任何解析，所以它的性能会更好。

如果您只是将所有图像元素收集到一个数组中，您可以将被篡改的图像的索引映射到字符串数组中的正确字符串。

＆＃13;

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];
  });  

});

＆＃13;

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

＆＃13;

使用onmouseover和onmouseoff与图像来改变文本

2 个答案: