Solved

Labels on drop down menus?

Posted on 2001-06-08
16
222 Views
Last Modified: 2010-04-09
If add the ALT tag when an user mouse over an image he can view a little label with the content setted in the alt tag: <IMG ID="Picture7" height=33 width=143 SRC="Images/a_buttonlGUID.gif" BORDER=0 ALT="Guida">

I would like to know if it is possible to let a similar label appearing when the user mouse over on the selected element of a drop down menu.

Thank you.
Regards
0
Comment
Question by:Ilalove
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 7
  • 5
  • 3
  • +1
16 Comments
 
LVL 19

Expert Comment

by:DreamMaster
ID: 6167261
You mean like a select box? Or a javascript generated dropdown?

Cause as far as I know there is no way to get anything like the ALT tag on the select box...

For any text items...you could use the title property...

Max.
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 6167274
You should resolve your old open questions (some with urgent in the title) before you ask more questions.  You may find that experts make you wait as long for a response as you have made them wait for resolution of your open Qs.

Drop down menu?  Expanding collapsing table or select?

Cd&
0
 

Author Comment

by:Ilalove
ID: 6167407
COBOLdinosaur if I didn't close some of my previous question this was because the proposed solutions not satisfied me. But I will follow your advice and I will delete them.
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 6167424
Okay, now wahat about the drop down? Is it a select?

Cd&
0
 

Author Comment

by:Ilalove
ID: 6167627
Yes dear COBOLdinosaur it is a select
0
 
LVL 19

Expert Comment

by:DreamMaster
ID: 6167647
Well like I said (and correct me Cd& if I'm wrong) as far as I know there is no way to show Alt text information on selectbox items...

Max.
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 6167698
Okay then you are pretty limited. The tool tips have to fire off of a
mouseover.  The option doesn't support that.  You can put a tooltip up
for mouse over on the select, but not the individual items.  The HTML
standard actually specifies support for a mouseover event on the option
but neither IE or Netscrape have implemented it.

Cd&
0
 

Author Comment

by:Ilalove
ID: 6167706
Dear Cobol I need to have that "label" ONLY on the first selected option...
0
 

Author Comment

by:Ilalove
ID: 6167721
Dear Cobol I need to have that "label" ONLY on the first selected option...
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 6167748
I think I can get that.  Have to experimnet a little be back shortly.

Cd&
0
 

Author Comment

by:Ilalove
ID: 6167772
I deposit here other 200 points ONLY for you: I will give these points only yo you because I know you are one of the most skilled person in EE on these topics.
Just a thing: this is very urgent x me.
0
 
LVL 19

Expert Comment

by:DreamMaster
ID: 6167798
Duh....why would he be on nr1 otherwise....

Geez...sorry but this sounds like a lot of drooling going on here.....

Max.
0
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 300 total points
ID: 6168682
I'm going to give you what I have up to now.  I can't get back to it until
the morning.

I can load from the mousedown event for the select to bring up a tip and have
it go with the mouse, I'll convert that to just load co-ordinates when I have
the rest figured out.

I still have not found a way to detect the mouse over the select but
I'm trapping the mouse movement, so I think it is just a matter of
gettin the x y co-ordinates to to be the firing mechanism on the mouse
move event.

I'll post what I have so you can look at it and see if i'm go ing in the
right direction.

<html>
<head>
<title>Changing Font Styles</title>
<script language="JavaScript">
<!--
var TRAP=false;
var CURREL=false;
var thepos=0;
function trap()
{
   if (TRAP)
   {
      return;
   }
   else
   {
   TRAP=window.event;
   trapx=TRAP.x;
   trapy=TRAP.y;
   }
}
function dragEvnt()
{
if (TRAP)
{
var WIN=window.event;
CURREL.style.top=WIN.y+10;
thepos=WIN.y
CURREL.style.left=WIN.x+10;
if       ((trapy<=(thepos+25)) && (trapy>=(thepos-25)))
{
  CURREL.style.visibility="visible";
}
else
{
   CURREL.style.visibility="hidden";
}
}
}
//-->
</script>

</head>
<body onLoad="CURREL=document.all['tooltip']" onMousemove="dragEvnt()">

<form name="fonts">
<table border=1>
<tr><td>
<select name="fontSel" onmousedown="trap()">
<option title="one" value="times" > select face
<option value="Times"> Times
<option value="Arial">  Arial
<option value="Courier"> Courier
</select>
</td>
</tr>
</table>
</form>
<div id="tooltip" style="background-color:lightyellow;color:black;
border:1px solid black;visibility:hidden;width:175;z-index:10;position:absolute">
This is the text of the tooltip
</div>

</body>
</html>


Cd&
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 6171007
Thanks for the A, but there is still more to do on it.  I post the improved version a little later.

Cd&
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 6171927
Well, this is not the perfect tool tips but I think it is the best way to
simulate tool tips for a select.  Something the can't be done for real.

This second version offers different approach the tip box stays in a static
position instead of tracking the cursor. that avoids the problem of dragging
under the select.  Now way to get the tip on top I even tried using a iframe
for the tip. The movement can be used by using the mousemove event, but it
is really wonky.

The positioning of the tip box is still base on cursor position during focus
and can be adjusted by changing the offsets.

The added feature in this version is the dynamic text in the tip.  An array
is used to change the text based on the selected option.

Any combination of features from the two is possible, and there are probably
additional effects possible with the use of various combinations of events.

There is no way t d any of this in Netscrap 4.x. It is possible it could be
at least partly implemented in NS6, but i have not played much with 6, so
I don't what is really possible.

Cd&



<html>
<head>
<title>Changing Font Styles</title>

<script language="JavaScript">
<!--
var tips = new Array(5);
tips[0]="this is the default text";
tips[1]="this is text for the first selection option";
tips[2]="tip for the second option";
tips[3]="all your bases are belong to us";
tips[4]="final tip";

var TRAP=false;
var CURREL=false;
var thepos=0;
function trap()
{
   if (TRAP)
   {
      dragEvnt()
   }
   else
   {
   TRAP=window.event;
   trapx=TRAP.x+15;
   trapy=TRAP.y+15;
   dragEvnt();
   }
}
function dragEvnt()
{
if (TRAP)
{
CURREL.style.top=trapy;
CURREL.style.left=trapx;
CURREL.style.visibility="visible";
}
}
function hideit()
{
   TRAP=false;
   CURREL.style.visibility="hidden";
}
//-->
</script>

</head>
<body onLoad="CURREL=document.all['tooltip'];CURREL.innerHTML=tips[0]">
<form name="fonts">
<table border=1>
<tr><td>
<select name="fontSel" onFocus="trap()" onBlur="hideit()"
   onChange="CURREL.innerHTML=tips[this.selectedIndex+1]">
<option title="one" value="times" > select face
<option value="Times"> Times
<option value="Arial">  Arial
<option value="Courier"> Courier
</select>
</td>
</tr>
</table>
</form>
<div id="tooltip" style="background-color:lightyellow;color:black;width:150;
border:1px solid black;visibility:hidden;width:175;z-index:10;position:absolute">
&nbsp;
</div>
</body>
</html>


0
 

Expert Comment

by:RedCCameleon
ID: 6176053
Ilalove,
It's very good of you to trust certain people, however, being NOT the number #1 in a topic area does not always mean that the expert is NOT 100% perfect. It would be appreciated by other experts if you also listen to their comments and provide additional input.

Reading this question it seems as if COBOLdinosaur did provide you with the best possible answer, but you did not listen to the other experts. Listening to other experts might give you additional information about the question you have / had. It is, of course, up to you to decide what to do.

RedCCameleon,
EE moderator
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…

751 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question