Menu
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 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 create 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″><SPAN title=”TEST 0″>AB AT HOME</SPAN></option>
<option value =”1″><SPAN title=”TEST 1″>AC AT HOME</SPAN></option>
<option value =”2″><SPAN title=”TEST 2″>AD AT HOME</SPAN></option>
<option value =”3″><SPAN title=”TEST 3″>BILLY</SPAN></option>
<option value =”4″><SPAN title=”TEST 4″>BRAND</SPAN></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>
</body>
</html>
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].
This example gives a single scenario of what 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.”><b>An OPTION of the drop-down list.</b></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]….