how to create tooltip like feautre in <select><option> feild

Hi,

I was trying to get a simple javascript tooltip (text on mouser over displays a image next to it) to work in a form in the select and options field. An image was suppose to appear next to each option in the select. (It works fine in any part of the form expect the select/options field.)

So I instead is there a way I can have one div which will display the image and on each mouseover in the select options the image will change/ swap. So for example:

<div>swap image goes here (show image 1, show image 2, show image 3)</div>

<select>
<option onmouseover='show image1'>View image 1</option>    
<option onmouseover='show image2'>View image 2</option>
<option onmouseover='show image 3'>View image 3</option>
</select>

Is this possible do to in javascript or php and how? (Please let me know if I need to clarify)
ultramooAsked:
Who is Participating?
 
Steve BinkConnect With a Mentor Commented:
This demo should point the way.  You can replace the innerHTML property with an <img> element, or maybe you have an <img> element there instead and just change the src attribute.  If you want to use images, create an array of src images in javascript, and use the index of the hovered option to get the appropriate array element.
<html>
  <head>
    <title>Option MouseOver Demo</title>
    <script type="text/javascript">
      function showoption(i) {
        t = document.getElementById('divmouseover');
        t.innerHTML='You are hovering option ' + i.value;
      }
    </script>
  </head>
  <body>
    <div id="divmouseover">&nbsp;</div>
    <select>
      <option value="1" onmouseover="showoption(this);">Option 1</option>
      <option value="2" onmouseover="showoption(this);">Option 2</option>
      <option value="3" onmouseover="showoption(this);">Option 3</option>
    </select>
  </body>
</html>

Open in new window

0
 
ultramooAuthor Commented:
Thanks thats exactly what I was after! I realize though its not working in internet explorer, can this be fixed?
0
 
Steve BinkCommented:
With my IE7 installation, it appears as though IE is not recognizing the mouseover event for the option elements.  While that event *is* part of the standard, IE has not shown a great history of caring about little things like interoperability.  A quick google for "IE option mouseover" shows this is a known issue.

I found one possible workaround, but have not played with it myself:

http://www.dougdossett.com/Details.aspx?Detail=11
0
Cloud Class® Course: CompTIA Healthcare IT Tech

This course will help prep you to earn the CompTIA Healthcare IT Technician certification showing that you have the knowledge and skills needed to succeed in installing, managing, and troubleshooting IT systems in medical and clinical settings.

 
ultramooAuthor Commented:
Thanks again for the help. This was the same problem I faced in the start with using tooltip (working in some browsers only for the select/option field). What if there was a way to change the mouseover event to a css class and intergrate it into the javascript? (Not sure if its even possible) Somthing like this:

<html>
  <head>
    <title>Option MouseOver Demo</title>
    <style type="text/css">
     .change{
     ....
    }
   </style>
    <script type="text/javascript">
      function showoption(i) {
        t = document.getElementById('divmouseover');
        t.innerHTML='You are hovering option ' + i.value;
        var change = ...
      }
    </script>
  </head>
  <body>
    <div id="divmouseover"> </div>
    <select>
      <option value="1" class="change">Option 1</option>
      <option value="2" class="change">Option 2</option>
      <option value="3" class="change">Option 3</option>
    </select>
  </body>
</html>

Or is there no hope? lol
 
0
 
Steve BinkCommented:
You are certainly free to experiment with it, but I'm guessing it is not going to go much further than it is.  If IE doesn't respond to the mouseover event, there's just nothing to hook into, CSS or not.  You could always create your own pseudo-dropdown box to mimic the behavior...a lot of work just to overcome Microsoft's issue.
0
 
ultramooAuthor Commented:
I think i'll stick to the first code you sent me. Thanks anyways!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.