onmouseover on option

[Syl]

Hi guys , is it possible to show a description of an option in a select box, when the mouse is over the option?

I had found a solution code

<SELECT NAME="selectName">
<OPTION ONMOUSEOVER="this.parentNode.title = this.text">1 Kibology
<OPTION ONMOUSEOVER="this.parentNode.title = this.text">2 Kibology
<OPTION ONMOUSEOVER="this.parentNode.title = this.text">3 Kibology
<OPTION ONMOUSEOVER="this.parentNode.title = this.text">4 Kibology
<OPTION ONMOUSEOVER="this.parentNode.title = this.text">5 Kibology
<OPTION ONMOUSEOVER="this.parentNode.title = this.text">6 Kibology
<OPTION ONMOUSEOVER="this.parentNode.title = this.text">7 Kibology
<OPTION ONMOUSEOVER="this.parentNode.title = this.text">8 Kibology
<OPTION ONMOUSEOVER="this.parentNode.title = this.text">9 Kibology
</SELECT>

but it only NN6 seems to fire onmouseover events for OPTION elements, IE4/5
not.

[PeejAvery]

IE 4/5 are really old. It is functional in IE6. There are 3.2% of the internet population using IE5, and who knows how little the IE4 is. You need to upgrade.

Browser Stats

[Syl]

I had try on IE 6 also but not function at all ...

[PeejAvery]

Try the following. Also, I would suggest using Firefox. You can use the Error Console to help debug. That should be your first JavaScript stop.

<select name="selectName">
<option onmouseover="this.parentNode.title=this.value" value="1 Kibology">1 Kibology</option>
<option onmouseover="this.parentNode.title=this.value" value="2 Kibology">2 Kibology</option>
<option onmouseover="this.parentNode.title=this.value" value="3 Kibology">3 Kibology</option>
<option onmouseover="this.parentNode.title=this.value" value="4 Kibology">4 Kibology</option>
<option onmouseover="this.parentNode.title=this.value" value="5 Kibology">5 Kibology</option>
<option onmouseover="this.parentNode.title=this.value" value="6 Kibology">6 Kibology</option>
<option onmouseover="this.parentNode.title=this.value" value="7 Kibology">7 Kibology</option>
<option onmouseover="this.parentNode.title=this.value" value="8 Kibology">8 Kibology</option>
<option onmouseover="this.parentNode.title=this.value" value="9 Kibology">9 Kibology</option>
</select>

[Alsvha]

I just tried to - and I couldn't get onmouseover in option in IE 6, works in FireFox though.
Dunno about IE 7, haven't got it at work.

[PeejAvery]

You can create your own custom drop down menu. Just use the onmouseover to your liking.

<div id='pagemenu' style='position:absolute;display:none'>
<table cellpadding=3 cellspacing=0 style='border: 1px solid #000000;background:#eeeeee' onmouseout="document.getElementById('pagemenu').style.display='none'">
  <tr>
    <td style='cursor:pointer' onmouseover="this.style.background='#ffffff';displayPJ('blank')" onmouseout="this.style.background='#eeeeee'"onclick="window.location='hhttp://www.google.com'">Google</td>
    <td style='cursor:pointer' onmouseover="this.style.background='#ffffff';displayPJ('blank')" onmouseout="this.style.background='#eeeeee'"onclick="window.location='hhttp://www.yahoo.com'">Yahoo</td>
    <td style='cursor:pointer' onmouseover="this.style.background='#ffffff';displayPJ('blank')" onmouseout="this.style.background='#eeeeee'"onclick="window.location='hhttp://www.lycos.com'">Lycos</td>
  </tr>
</table>
</div>

<script language="JavaScript">
function displayPJ(obj){
  if(obj != "blank"){
    if(obj.offsetParent){
      x = obj.offsetLeft;
      y = obj.offsetTop;
      h = obj.offsetHeight;
      while(obj = obj.offsetParent){
        x += obj.offsetLeft;
        y += obj.offsetTop;
      }
    }
    document.getElementById("pagemenu").style.left = x;
    document.getElementById("pagemenu").style.top = y;
  }
  document.getElementById("pagemenu").style.display = "block";
}
</script>

<font onclick="displayPJ(this)">Search Engines</font>

[Syl]

If only can use on FireFox tht mean we can't display the description by using onmouseover on IE6/IE7 ?

[PeejAvery]

If only can use on FireFox tht mean we can't display the description by using onmouseover on IE6/IE7 ?

Did you even try my code? It works on IE5.5, IE6, IE7, Firefox 1, Firefox 1.5, Firefox 2, and Safari.

[Syl]

<select name="selectName">
<option onmouseover="this.parentNode.title=this.value" value="1 Kibology">1 Kibology</option>
<option onmouseover="this.parentNode.title=this.value" value="2 Kibology">2 Kibology</option>
<option onmouseover="this.parentNode.title=this.value" value="3 Kibology">3 Kibology</option>
<option onmouseover="this.parentNode.title=this.value" value="4 Kibology">4 Kibology</option>
<option onmouseover="this.parentNode.title=this.value" value="5 Kibology">5 Kibology</option>
<option onmouseover="this.parentNode.title=this.value" value="6 Kibology">6 Kibology</option>
<option onmouseover="this.parentNode.title=this.value" value="7 Kibology">7 Kibology</option>
<option onmouseover="this.parentNode.title=this.value" value="8 Kibology">8 Kibology</option>
<option onmouseover="this.parentNode.title=this.value" value="9 Kibology">9 Kibology</option>
</select>

I had try this code on my IE6 , but it just a normal selection box. Is it i need to set any thing on my IE ?

[PeejAvery]

I had try this code on my IE6 , but it just a normal selection box. Is it i need to set any thing on my IE ?

No, not that code. The code I posted after that to create your own custom drop down.

Here it is again.

<div id='pagemenu' style='position:absolute;display:none'>
<table cellpadding=3 cellspacing=0 style='border: 1px solid #000000;background:#eeeeee' onmouseout="document.getElementById('pagemenu').style.display='none'">
  <tr>
    <td style='cursor:pointer' onmouseover="this.style.background='#ffffff';displayPJ('blank')" onmouseout="this.style.background='#eeeeee'"onclick="window.location='hhttp://www.google.com'">Google</td>
    <td style='cursor:pointer' onmouseover="this.style.background='#ffffff';displayPJ('blank')" onmouseout="this.style.background='#eeeeee'"onclick="window.location='hhttp://www.yahoo.com'">Yahoo</td>
    <td style='cursor:pointer' onmouseover="this.style.background='#ffffff';displayPJ('blank')" onmouseout="this.style.background='#eeeeee'"onclick="window.location='hhttp://www.lycos.com'">Lycos</td>
  </tr>
</table>
</div>

<script language="JavaScript">
function displayPJ(obj){
  if(obj != "blank"){
    if(obj.offsetParent){
      x = obj.offsetLeft;
      y = obj.offsetTop;
      h = obj.offsetHeight;
      while(obj = obj.offsetParent){
        x += obj.offsetLeft;
        y += obj.offsetTop;
      }
    }
    document.getElementById("pagemenu").style.left = x;
    document.getElementById("pagemenu").style.top = y;
  }
  document.getElementById("pagemenu").style.display = "block";
}
</script>

<font onclick="displayPJ(this)">Search Engines</font>