Using onmouseover and onmouseoff with images to change text

Question

I have 6 images and I wish to change the text next to them based on which image is being "hovered" over with the mouse.

I tried doing this using JavaScript with the onmouseover and onmouseout events, with some of the code direct copies from working examples, yet my code is currently not working.

Here is a jsfiddle: https://jsfiddle.net/schanz/xh4pb9n6/

Additionally, here is the raw code: `

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

`

Change innerhtml to `innerHTML` in your script. That will do the job. — Ofisora, Aug 02 '17 at 00:34

score 0 · Answer 1 · answered Aug 02 '17 at 00:37

0

There is a typo in your javascript. Instead of innerhtml, it should be innerHTML.

answered Aug 02 '17 at 00:37

tim1234

196
2
12

score 0 · Answer 2 · answered Aug 02 '17 at 00:41

First, you should not use inline HTML event attributes, such as onmouseover and onmouseout. Always separate your JavaScript from your HTML. [Here's why.]1

Second, don't use tables for page layout. They should just be used for tabular data representation.

Third, you have a typo with .innerhtml, which should be innerHTML. But, since you aren't actually providing any HTML, you should be using textContent, which performs better because the HTML parser doesn't have to do any parsing.

If you simply gather all the image elements into an array, you can map the index of the image being moused over/out to the correct string from your string array.

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>

Using onmouseover and onmouseoff with images to change text

2 Answers2