Version compl�te: jsB@nk » Form » Textarea » Tooltip d'entrée
URL: https://www.javascriptbank.com/tooltip-for-input.html
Ce script détecte la position de la souris et attend les entrées de la souris. Ensuite, il sera affiché une couche/div appelé 'Display' 95 pixels à droite du curseur et de rédiger le texte de l'aide d'infos sur ce "Affichage". Et que la souris est hors de la «Display», le «Display» de diappear ....
Version compl�te: jsB@nk » Form » Textarea » Tooltip d'entrée
URL: https://www.javascriptbank.com/tooltip-for-input.html
<SCRIPT>//detecting browser to dynamically write appropriate DIVs/LAYERsN=(navigator.appName.indexOf('Netscape')!=-1&&parseInt(navigator.appVersion)<5)S=(navigator.appName.indexOf('Netscape')!=-1&&parseInt(navigator.appVersion)>4.9)M=(navigator.appName.indexOf('Microsoft')!=-1)Vis=new Array()Vis[0]=(M||S) ? "hidden" : "hide"Vis[1]=(M||S) ? "visible" : "show"function GetDiv(divId,divY,divX,divW,divH,bCol,visb,zInd){bkCol=(bCol!="")?((N)?" bgColor="+bCol:";background:"+bCol):""Styl = (M||S) ? "<DIV" : "<LAYER"if(M||S){Styl+=" ID="+divIdStyl+=" style='position:absolute;top:"+divY+";left:"+divX+";width:"+divW+";height:"+divH+bkColStyl+=";visibility:"+Vis[visb]+";z-index:"+zIndStyl+="'>"}if(N){Styl+=" ID="+divIdStyl+=" top="+divY+" left="+divX+" width="+divW+" height="+divH+bkColStyl+=" visibility="+Vis[visb]+" z-index="+zIndStyl+=">"}document.writeln(Styl)}function EndDiv(){(M||S)? document.writeln("</DIV>"): document.writeln("</LAYER>")}function PutIt(ID,dX,dY){if(N){document.layers[ID].left=dXdocument.layers[ID].top=dY}if(M){document.all[ID].style.left=dXdocument.all[ID].style.top=dY}if(S){document.getElementById(ID).style.left=dXdocument.getElementById(ID).style.top=dY}}function ShowHide(ID,vs){if(N){document.layers[ID].visibility=Vis[vs]}if(M){document.all[ID].style.visibility=Vis[vs]}if(S){document.getElementById(ID).style.visibility=Vis[vs]}}function Xof(ID){if(N){return document.layers[ID].left}if(M){return document.all[ID].style.left}if(S){return document.getElementById(ID).style.left}}function Yof(ID){if(N){return document.layers[ID].top}if(M){return document.all[ID].style.top}if(S){return document.getElementById(ID).style.top}}function Zind(ID,zz){if(N){document.layers[ID].zIndex=zz}if(M){document.all[ID].style.zIndex=zz}if(S){document.getElementById(ID).style.zIndex=zz}}function ChangeCol(ID,colrx){if(M)document.all[ID].style.background=colrxif(N)document.layers[ID].bgColor=colrxif(S)document.getElementById(ID).style.background=colrx}function DivWrite(IdName,Str) {if (N){document.layers[IdName].document.write(Str)document.layers[IdName].document.close()}if(M) document.all[IdName].innerHTML=Strif(S) document.getElementById(IdName).innerHTML=Str}</SCRIPT><SCRIPT 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 mubers, 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.clientXY=event.clientY}if(S){X=e.pageXY=e.pageY}}Yc=0Xc=0GetDiv("Display",0,0,200,50,"skyblue",0,0)document.write("Display")EndDiv() function GetDisplay(i){Yc=YXc=XPutIt('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><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><FORM><TABLE cellPadding=20 width=450> <TBODY> <TR> <TD>Name:<BR> <INPUT onmouseover="Ovr=setTimeout('GetDisplay(1)',500)" onfocus=BlurDisplay() onmouseout=clearTimeout(Ovr);BlurDisplay() size="20"> <TD align=right rowSpan=3><FONT size=4>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... <HR> <FONT size=1>(Note: This last effect uses "onmouseout" on the images) </FONT></FONT> <TR> <TD>DOB:<BR> <INPUT onmouseover=GetDisplay(2) onfocus=BlurDisplay() onmouseout=BlurDisplay() size="20"> <TR> <TD>Email:<BR> <INPUT onmouseover=GetDisplay(3) onfocus=BlurDisplay() onmouseout=BlurDisplay() size="20"> </TR></TBODY></TABLE></FORM><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->