mouse over on a SELECT

castali

02-20-2004, 07:20 AM

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

thank you

glenngv

02-20-2004, 08:24 AM

Do you mean tooltips for select elements? Vladdy has a custom tooltip script (http://klproductions.com/kltooltips.html).

Kor

02-20-2004, 08:29 AM

You mean something like this:

<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.

castali

02-20-2004, 08:29 AM

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

thank you

glenngv

02-20-2004, 08:36 AM

You can put custom tooltip in the select itself not to each option as there is no onmouseover event for option tag.

castali

02-20-2004, 08:46 AM

ok then .... thank you

fredmv

02-20-2004, 08:50 AM

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.

Kor

02-20-2004, 08:55 AM

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:

<!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>

glenngv

02-20-2004, 09:35 AM

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>

castali

02-20-2004, 09:35 AM

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

glenngv

02-20-2004, 09:45 AM

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.

castali

02-20-2004, 09:51 AM

I'm using firefox

Kor

02-20-2004, 04:05 PM

[quote
I'm using firefox
[/quote]

Ask your self what the users of your site are using, not what are you...

castali

02-20-2004, 04:08 PM

I use Firefox for quality and IE + Opera for testing

glenngv

02-23-2004, 02:39 AM

So what exactly is the problem with Firefox?
Have you tried the code I posted?

castali

02-23-2004, 07:03 AM

yes glenngv !
I have just forgotten to reply after testing

I have build a componant for .NET with your code :-)) .....it works alone from XML or database

but not at all for IE :-((

great anyway!
thanks a ton !!

glenngv

02-23-2004, 07:39 AM

Originally posted by glenngv
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>

As I said, the title attribute on <select> and <option> tags don't work in IE as well as onmouseover in <option> tag. The nearest you can get is to use the custom tooltip script I linked in my other post. But the tooltip will only show on the select tag itself not in the option tag.

castali

02-23-2004, 07:55 AM

yes I tried both ..... but for a very long list a tooltip on select lokks a bit strange ..... maybe one day IE will be a normal browser