JSFiddle - React, Tailwind, and code Playground

by schanz

HTML

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

JavaScript

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