This is a discussion on "How can I add mouse hover functionality to the OPTION tag?" within the JavaScript Forum section. This forum, and the thread "How can I add mouse hover functionality to the OPTION tag? are both part of the Program Your Website category.
|
|
|
|
|
 |
||
How can I add mouse hover functionality to the OPTION tag?
|
||
| Notices |
 |
|
|
LinkBack | Thread Tools |
Jun 17th, 2005, 13:50
|
|||
|
|||
|
How can I add mouse hover functionality to the OPTION tag?
In my JSP I am trying to add mouse hover functionality in a drop-down list's options using the <SPAN> tag in the option's text value. I am trying to get this functionality working in "Microsoft Internet Explorer" Version 6.0
The reason I am trying to do this, is b/c I need to allocate several drop-down list in a row [inside a table], in which I only have certain amount of space. To be able to allocate all the drop-down list in a row I have to make the width of the drop-down list really small e.g. style="size:-2;width:70px;" As a result, the options in the list are not display completely; therefore, I am trying to add the mouse hove functionality into the drop-down list. That is, when a user hovers on any option of the drop-down list the entire option text will be displayed in a small popup text [using the <SPAN> tag] I created a dummy [for testing purpose] drop-down list to help me illustrate or display what I am trying to do. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Test 1</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <body> Test Drop-Down menu <div id="searchit"> <select style="size:-2;width:70px;"> <option value ="0" onMouseOver="this.innerHTML = 'TEST 0'" onMouseOut="this.innerHTML = 'AB AT HOME'">AB AT HOME</option> <option value ="1" onMouseOver="this.innerHTML = 'TEST 1'" onMouseOut="this.innerHTML = 'AC AT HOME'">AC AT HOME</option> <option value ="2" onMouseOver="this.innerHTML = 'TEST 2'" onMouseOut="this.innerHTML = 'AD AT HOME'">AD AT HOME</option> <option value ="3" title="TEST 3">BILLY</option> <option value ="4" title="TEST 4">BRAND</option> <option value ="5"><SPAN title="TEST 5">BURRO</SPAN></option> <option value ="6"><SPAN title="TEST 6">DARK</SPAN></option> <option value ="7"><SPAN title="TEST 7">DESIGNER</SPAN></option> <option value ="8"><SPAN title="TEST 8">DICOR</SPAN></option> <option value ="9"><SPAN title="TEST 9">EDUCATION</SPAN></option> <option value ="10"><SPAN title="TEST 10">ENTERTAINMENT</SPAN></option> <option value ="11"><SPAN title="TEST 11">GENERIC</SPAN></option> <option value ="12"><SPAN title="TEST 12">LILLY PULITZER</SPAN></option> <option value ="13"><SPAN title="TEST 13">MARQUIS</SPAN></option> <option value ="14"><SPAN title="TEST 14">OPEN LINE</SPAN></option> <option value ="15"><SPAN title="TEST 15">PROPRIETARY</SPAN></option> <option value ="16"><SPAN title="TEST 16">SAPER 300</SPAN></option> <option value ="17"><SPAN title="TEST 17">SPORTS</SPAN></option> <option value ="18"><SPAN title="TEST 18">SUPREME DIMENSIONS</SPAN></option> <option value ="19"><SPAN title="TEST 19">SUTREME DIMENSIONS</SPAN></option> <option value ="20"><SPAN title="TEST 20">TEST</SPAN></option> </select> </div> <h1> <pre> Mouse HOVER in the drop-down list options. </pre> </h1> <SPAN title="TEST 3">BILLY</SPAN> </body> </html> When I hover an option of the drop-down list [say AB AT HOME] it did not display in a separate text the title [for AB AT HOME it will be TEST 0]. It did not display anything, it behave like a regular drop-down list. I try doing it this way too but it did not work <select style="size:-2;width:70px;"> <option value="0" title="TEST 0">AB AT HOME</option> <option value="1" title="TEST 1">AC AT HOME</option> <option value="2" title="TEST 2">AD AT HOME</option> <option value="3" title="TEST 3">BILLY</option> <option value="4" title="TEST 4">BRAND</option> <option value="5" title="TEST 5">BURRO</option> </select> When I hover an option of the drop-down list [say BILLY] it did not display in a separate text the title [for BILLY it will be TEST 3]. It did not display anything, it behave like a regular drop-down list. ************************************************** *********************************** The following example gives a single scenario of the type of functionality I need in the drop-down list's OPTION's tag: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Test 2</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <body> <pre> <h1> Mouse HOVER the text below. </h1> </pre> <span title="THIS IS WHAT I WANT TO DISPLAY WHEN I HOVER! An OPTION of the drop-down list.">An OPTION of the drop-down list.</span> </body> </html> Does anyone have any idea on how to add the mouse hover functionality in the drop-down list using the <SPAN> tag? Any other solutions with the same end result are welcome [using JavaScript - I thought about using onMouseOver].... From what I try so far I don't think the select tag in IE supporst that functionality... I seems to me that the only solution I have is to use DHTML [JavaScript & CSS]. 
|
|
|
|
Jun 20th, 2005, 20:41
|
|||
|
|||
|
This isn't impossible to do, but it's not simple either. Before going into the details of it, I'll say that I think doing this is probably unnecessary and that if you look for a better page layout you can probably eliminate having to do this. Also, when you start messing with the way things normally work, users start having problems using your site.
|
|
| Tags |
| add, mouse, hover, functionality, option, tag |
| Thread Tools | |
|
|
Similar Threads
|
||||
| Thread | Thread Starter | Forum | Replies | Last Post |
| CMS Functionality Required | cre8tivelive | Job Opportunities | 0 | Feb 19th, 2008 18:12 |
| Search Input functionality | mrnthere | Web Page Design | 3 | May 18th, 2006 03:59 |
| How can I add mouse hover functionality to the OPTION tag? | gecastill | PHP Forum | 0 | Jun 14th, 2005 15:01 |
