...

View Full Version : mouse over on a SELECT



castali
02-20-2004, 08: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, 09:24 AM
Do you mean tooltips for select elements? Vladdy has a custom tooltip script (http://klproductions.com/kltooltips.html).

Kor
02-20-2004, 09: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, 09:29 AM
yes a tooltip on <option> of a <SELECT> ... a normal tooltip is enough

thank you

glenngv
02-20-2004, 09: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, 09:46 AM
ok then .... thank you

fredmv
02-20-2004, 09: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, 09: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, 10: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, 10:35 AM
but you don't get a mouseover on each otption ... ?

glenngv
02-20-2004, 10: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, 10:51 AM
I'm using firefox

Kor
02-20-2004, 05: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, 05:08 PM
I use Firefox for quality and IE + Opera for testing

glenngv
02-23-2004, 03:39 AM
So what exactly is the problem with Firefox?
Have you tried the code I posted?

castali
02-23-2004, 08: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, 08: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, 08: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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum