Web Analytics Made Easy -
StatCounter mouse over on a SELECT - CodingForum

Announcement

Collapse
No announcement yet.

mouse over on a SELECT

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • mouse over on a SELECT

    is there an easy way to do a mouseover on a SELECT (listBox)
    to get additional informations on its elements ?

    thank you

  • #2
    Do you mean tooltips for select elements? Vladdy has a custom tooltip script.
    Glenn
    vBulletin Mods That Rock!

    Comment


    • #3
      You mean something like this:

      PHP Code:
      <html>
      <
      head>
      <
      script>
      function 
      bla(a){
      var 
      aa = new Array()
      for(
      i=0;i<a.options.length;i++){
      aa[i] = a.options[i].text;
      }
      document.getElementById('x').value aa[a.selectedIndex];
      }
      </
      script>
      </
      head>

      <
      body>
      <
      select id="select" size="3" multiple  onmouseover="bla(this)">
        <
      option selected>one</option>
        <
      option>two</option>
        <
      option>three</option>
      </
      select><br>
      show the selected option's text below<br>

      <input id ="x" size="10">
      </body>
      </html> 
      But I can not see the practical reason for this...??

      As a note: <option> tag does not support, as far as I know, onmouseover event, only <select> does.
      KOR
      Offshore programming
      -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

      Comment


      • #4
        yes a tooltip on <option> of a <SELECT> ... a normal tooltip is enough

        thank you

        Comment


        • #5
          You can put custom tooltip in the select itself not to each option as there is no onmouseover event for option tag.
          Glenn
          vBulletin Mods That Rock!

          Comment


          • #6
            ok then .... thank you

            Comment


            • #7
              Originally posted by glenngv
              no onmouseover event for option tag.
              You sure? I just tried it and it worked flawlessly under Mozilla Firefox 0.8.
              Moderator @ WebDeveloper.com
              Mentor @ WebXpertz.net

              Comment


              • #8
                You sure? I just tried it and it worked flawlessly under Mozilla Firefox 0.8.
                It might be, but not with IE6

                You may try something like:

                PHP Code:
                <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
                <
                html>
                <
                head>
                <
                script>
                function 
                bla(a,b){
                var 
                tx='<br>';
                var 
                aa = new Array()
                for(
                i=0;i<a.options.length;i++){
                aa[i] = a.options[i].text;
                tx tx+aa[i]+'<br>';
                }
                document.getElementById('x').innerHTML 'here you can choose:'+tx;
                document.getElementById('x').style.display b;
                }
                </
                script>
                </
                head>

                <
                body>
                <
                select id="select" onmouseover="bla(this,'inline')" onmouseout="bla(this,'none')">
                  <
                option>one</option>
                  <
                option>two</option>
                  <
                option>three</option>
                </
                select><br>
                <
                br>
                <
                div id ="x" style="position:absolute; display:none; background-color: #CCCCCC; layer-background-color: #CCCCCC; border: 1px none #000000; width: 100;"></div>
                </
                body>
                </
                html
                KOR
                Offshore programming
                -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

                Comment


                • #9
                  I always thought that title in select or option tag and onmouseover in option tag are not supported. But I realized now that this is only true in IE.

                  This works in Mozilla:

                  <select title="This is a select">
                  <option value="blah blah" onmouseover="window.status=this.value" title="blah blah">item 1</option>
                  <option value="hello" onmouseover="window.status=this.value" title="hello">item 2</option>
                  <option value="hi" onmouseover="window.status=this.value" title="hi">item 3</option>
                  </select>
                  Glenn
                  vBulletin Mods That Rock!

                  Comment


                  • #10
                    but you don't get a mouseover on each otption ... ?

                    Comment


                    • #11
                      But the position of the tooltip for option tag is sometimes off. Sometimes it just blinks. I'm using Mozilla1.0. View the screenshot to see the tooltip way off mark.
                      Attached Files
                      Glenn
                      vBulletin Mods That Rock!

                      Comment


                      • #12
                        I'm using firefox

                        Comment


                        • #13
                          [quote
                          I'm using firefox
                          [/quote]

                          Ask your self what the users of your site are using, not what are you...
                          KOR
                          Offshore programming
                          -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

                          Comment


                          • #14
                            I use Firefox for quality and IE + Opera for testing

                            Comment


                            • #15
                              So what exactly is the problem with Firefox?
                              Have you tried the code I posted?
                              Glenn
                              vBulletin Mods That Rock!

                              Comment

                              Working...
                              X