-
October 31st, 2006, 10:59 PM
#1
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.
-
November 1st, 2006, 08:49 AM
#2
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.
-
November 1st, 2006, 08:22 PM
#3
I had try on IE 6 also but not function at all ...
-
November 1st, 2006, 10:51 PM
#4
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.
-
November 2nd, 2006, 04:53 AM
#5
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.
-
November 2nd, 2006, 09:31 AM
#6
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.
-
November 13th, 2006, 12:43 AM
#7
Re: onmouseover on option
If only can use on FireFox tht mean we can't display the description by using onmouseover on IE6/IE7 ?
-
November 13th, 2006, 09:45 AM
#8
Re: onmouseover on option
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.
-
November 13th, 2006, 09:52 PM
#9
Re: onmouseover on option
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 ?
-
November 14th, 2006, 10:00 AM
#10
Re: onmouseover on option
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
-
Forum Rules
|
Click Here to Expand Forum to Full Width
|