onmouseover with <select><option>

[Edward Ulle]

Does anyone know how to make a mouseover event for an option?  As the user slides down the list of select options I want to display a small pictogram of what they get if they pick that opion.  This is for a custom dialog in a Google Doc App.  I've research the net and stackoverflow and nothing I have found works.  Maybe it doesn't work at all with custom dialog.

[Edward Ulle]

So I'm able to do it from a <select> tag but not an <option> tag.  I have to select an option then go back to the select field to display the pictogram.  The problem is if I change the selection the old pictogram is displayed for moment and then the new pictogram appears.  Any ideas why?

<span id="plotHint"><img id="plotHintImage" src="https://drive.google.com/uc?export=view&id=1FSw3XRVjrZV5MV-Wj0Du5OcyPSD-ufPF"></span>

<select class="plotSelect tooltip" id="typeSelect" onchange="plotSelectOnChange(this.value)" onmouseenter="plotSelectOnMouseEnter()" onmouseleave="plotSelectOnMouseLeave()">

 

function plotSelectOnChange(select) {

    try {
      // i not shown for brevity

      var img = "https://drive.google.com/uc?export=view&id="+ids[i];

      document.getElementById("plotHintImage").src = img;

    }

    catch(err) {

      alert(err);

    }

  }

  

  function plotSelectOnMouseEnter(select) {

    try {

      var hint = document.getElementById("plotHint");

      hint.style.visibility = "visible";

    }

    catch(err) {

      alert(err);

    }

  }

  

  function plotSelectOnMouseLeave() {

    try {

      var hint = document.getElementById("plotHint");

      hint.style.visibility = "hidden";

    }

    catch(err) {

      alert(err);

    }

  }

[Alex]

As I know you need to create your own select box out of divs.