onmouseover on option

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.

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

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

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.

Code:

---

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

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

Code:

---

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

---

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

Quote:

---

Originally Posted by Syl

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.

Quote:

---

Originally Posted by PeejAvery

Code:

---

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

Quote:

---

Originally Posted by Syl

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.

Code:

---

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

---