onmouseover on option
CodeGuru Home VC++ / MFC / C++ .NET / C# Visual Basic VB Forums Developer.com
Results 1 to 10 of 10

Thread: onmouseover on option

  1. #1
    Join Date
    Oct 2006
    Posts
    4

    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.

  2. #2
    PeejAvery's Avatar
    PeejAvery is offline Super Moderator Power Poster
    Join Date
    May 2002
    Posts
    10,870

    Re: onmouseover on option

    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
    If the post was helpful...Rate it! Remember to use [code] or [php] tags.

  3. #3
    Join Date
    Oct 2006
    Posts
    4
    I had try on IE 6 also but not function at all ...

  4. #4
    PeejAvery's Avatar
    PeejAvery is offline Super Moderator Power Poster
    Join Date
    May 2002
    Posts
    10,870

    Re: onmouseover on option

    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>
    If the post was helpful...Rate it! Remember to use [code] or [php] tags.

  5. #5
    Join Date
    Feb 2005
    Location
    Denmark
    Posts
    742

    Re: onmouseover on option

    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.

  6. #6
    PeejAvery's Avatar
    PeejAvery is offline Super Moderator Power Poster
    Join Date
    May 2002
    Posts
    10,870

    Re: onmouseover on option

    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 the post was helpful...Rate it! Remember to use [code] or [php] tags.

  7. #7
    Join Date
    Oct 2006
    Posts
    4

    Re: onmouseover on option

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

  8. #8
    PeejAvery's Avatar
    PeejAvery is offline Super Moderator Power Poster
    Join Date
    May 2002
    Posts
    10,870

    Re: onmouseover on option

    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.
    If the post was helpful...Rate it! Remember to use [code] or [php] tags.

  9. #9
    Join Date
    Oct 2006
    Posts
    4

    Re: onmouseover on option

    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 ?

  10. #10
    PeejAvery's Avatar
    PeejAvery is offline Super Moderator Power Poster
    Join Date
    May 2002
    Posts
    10,870

    Re: onmouseover on option

    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>
    If the post was helpful...Rate it! Remember to use [code] or [php] tags.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  


Windows Mobile Development Center


Click Here to Expand Forum to Full Width

This is a CodeGuru survey question.


Featured


HTML5 Development Center