کد تول تایپ جاوا اسکریپت

کد تول تایپ جاوا اسکریپت

این کد یکی از بهترین کدهای تول تایپ است که تا کنون دیده ام علت آن نه تنها زیبایی آن بلکه سازگاری با تمامی نسخه های مرورگرها و همچنین مرورگرهای اینترنت اکسپلورر است نحوه کار این کد هم به این صورت است که با قرار دادن ماوس روی لینک یک کادر توضیحات کوچک باز می گردد که به اصطلاح به آن تول تایپ می گویند .

جهت استفاده از این کد ابتدا کد زیر را در head قالب خود قرار دهید

<style type="text/css"> #fifteenth{position: absolute;width: 150px;border: 2px solid black;padding: 2px;background-color: #CCFFFF;visibility: hidden;z-index: 99;filter: progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135);} </style>

سپس کد زیر را در body قالب قرار دهید

<div id="fifteenth"></div> <script type="text/javascript"> var sixteenth=-62; var seventeenth=21; var eighteenth=document.all;var nineteenth=document.getElementById && !document.all;var twentieth=false; if (eighteenth||nineteenth)var first2=document.all? document.all["fifteenth"] : document.getElementById? document.getElementById("fifteenth") : ""; function second2(){return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body;} function third2(fourth2, fifth2, sixth2){ if (nineteenth||eighteenth){ if (typeof sixth2!="undefined") first2.style.width=sixth2+"px"; if (typeof fifth2!="undefined" && fifth2!="") first2.style.backgroundColor=fifth2;first2.innerHTML=fourth2;twentieth=true;return false;}} function fifteenth3(e){ if (twentieth){var sixteenth3=(nineteenth)?e.pageX : event.x+second2().scrollLeft;var seventeenth3=(nineteenth)?e.pageY : event.y+second2().scrollTop;var eighteenth3=eighteenth&&!window.opera? second2().clientWidth-event.clientX-sixteenth : window.innerWidth-e.clientX-sixteenth-20;var nineteenth3=eighteenth&&!window.opera? second2().clientHeight-event.clientY-seventeenth : window.innerHeight-e.clientY-seventeenth-20;var twentieth3=(sixteenth<0)? sixteenth*(-1) : -960; if (eighteenth3<first2.offsetWidth)first2.style.left=eighteenth? second2().scrollLeft+event.clientX-first2.offsetWidth+"px" : window.pageXOffset+e.clientX-first2.offsetWidth+"px"; else if (sixteenth3<twentieth3)first2.style.left="5px";else first2.style.left=sixteenth3+sixteenth+"px"; if (nineteenth3<first2.offsetHeight)first2.style.top=eighteenth? second2().scrollTop+event.clientY-first2.offsetHeight-seventeenth+"px" : window.pageYOffset+e.clientY-first2.offsetHeight-seventeenth+"px";else first2.style.top=seventeenth3+seventeenth+"px";first2.style.visibility="visible";}} function first4(){ if (nineteenth||eighteenth){twentieth=false;first2.style.visibility="hidden";first2.style.left="-1000px";first2.style.backgroundColor='';first2.style.width='';}}document.onmousemove=fifteenth3; </script> <a href="http://javaweb.blogsky.com" onMouseover="third2('<center> www.javaweb.blogsky.com </center> ', 'red', 244)"; onMouseout="first4()">کدهای جاوا اسکریپت</a>

نکته 1: برای تغییر دادن متن لینک و تول تایپ به آخر کد دوم رفته و در جایی که با رنگ قرمز مشخص کرده ام تغییرات لازم را بدهید

<a href="http://javaweb.blogsky.com" onMouseover="third2('<center> www.javaweb.blogsky.com </center> ', 'red', 244)"; onMouseout="first4()">کدهای جاوا اسکریپت</a>

که رنگ قرمز اول مربوط به آدرس لینک شماست رنگ قرمز دوم متن تول تایپ و رنگ سوم متن لینک است