Tweet
is there an easy way to do a mouseover on a SELECT (listBox)
to get additional informations on its elements ?
thank you
to get additional informations on its elements ?
thank you
-
-
Do you mean tooltips for select elements? Vladdy has a custom tooltip script. -
You mean something like this:
But I can not see the practical reason for 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>
As a note: <option> tag does not support, as far as I know, onmouseover event, only <select> does.Comment
-
yes a tooltip on <option> of a <SELECT> ... a normal tooltip is enough
thank youComment
-
You can put custom tooltip in the select itself not to each option as there is no onmouseover event for option tag.Comment
-
ok then .... thank youComment
-
You sure? I just tried it and it worked flawlessly under Mozilla Firefox 0.8.Originally posted by glenngv
no onmouseover event for option tag.Moderator @ WebDeveloper.com
Mentor @ WebXpertz.netComment
-
It might be, but not with IE6You sure? I just tried it and it worked flawlessly under Mozilla Firefox 0.8.
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>
Comment
-
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>Comment
-
but you don't get a mouseover on each otption ... ?Comment
-
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 FilesComment
-
-
I'm using firefoxComment
-
[quote
I'm using firefox
[/quote]
Ask your self what the users of your site are using, not what are you...Comment
-
I use Firefox for quality and IE + Opera for testingComment
-
So what exactly is the problem with Firefox?
Have you tried the code I posted?Comment
Comment