Uncle Jim's Web Designs
OnMouseover Form Tool Tip
Author:
Kien Caoxuan
Name:
This script detects the mouse position and waits for mouseover the inputs. Then it will show up a layer/div called "Display" 95 pixels right to the cursor and write the appropriate help info text on this "Display". And as the mouse is out of the "Display", the "Display" would diappear. The last effect uses "onmouseout" on the images. The first field has a setTimeOut sensor.
If you move the mouse over it too quickly, the tooltip won't show!
DOB:
Email:
INSTALLATION INSTRUCTIONS
COPY
-
Insert Between Head Tags: <HEAD></HEAD>
<script type="text/javascript" src=laydiv.js></script> <script type="text/javascript" language=javascript><!-- if(N){alert("Netscape4.x does not support inline style\nand won't handle mouse events for form elements.\nIt SUX! and I hate it!");self.close()} Content=new Array("", "Please write your name here.<br> No numbers, please.", "Your date of birth, in format DD-MM-YYYY", "Please type in your email here. <br>(Optional)" ) document.onmousemove=newPos; function newPos(e){ if(M){ X=event.clientX Y=event.clientY } if(S){ X=e.pageX Y=e.pageY } } Yc=0 Xc=0 GetDiv("Display",0,0,200,50,"skyblue",0,0) document.write("Display") EndDiv() function GetDisplay(i){ Yc=Y Xc=X PutIt('Display',Xc-25,Yc+15) ShowHide('Display',1) lyrWrt("Display",Content[i]) } function BlurDisplay(){ ShowHide('Display',0) } function lyrWrt(IdName,Str) { if(M) document.all[IdName].innerHTML=Str if(S) document.getElementById(IdName).innerHTML=Str } //--></script>
COPY
-
Insert Inside Body: <BODY></BODY>
<center><form> <table width=450 cellpadding=20><tr><td>Name:<br> <input onmouseover="Ovr=setTimeout('GetDisplay(1)',500)" onmouseout="clearTimeout(Ovr);BlurDisplay()" onfocus="BlurDisplay()"> </tr> <tr><td>DOB:<br> <input onmouseover="GetDisplay(2)" onmouseout="BlurDisplay()" onfocus="BlurDisplay()"></td></tr> <tr><td>Email:<br><input onmouseover="GetDisplay(3)" onmouseout="BlurDisplay()" onfocus="BlurDisplay()"></td></tr> </table></form></center>
COPY
-
Insert into Body Tag: <BODY 'CODE HERE'>
style="cursor: crosshair"
Save the below script:
laydiv.js
Close This Window