عرب كود - مؤثرات الروابط

عمل وصف للرابط عند وضع الماوس عليه 1

طريقة التركيب

عدل في الوسم A ليظهر مثل هذا

عمل وصف للرابط عند وضع الماوس عليه 2

طريقة التركيب

انسخ هذا الكود و ضعه في المكان الذي تريده في منطقة BODY
يمكنك استخدام أكواد html لتغيير نوع و و حجم و لون الخط
<script> var linktext=new Array() linktext[0]="وصف الرابط الأول" linktext[1]="وصف الرابط الثاني" linktext[2]="وصف الرابط الثالث" linktext[3]="وصف الرابط الرابع" linktext[4]="وصف الرابط الخامس" linktext[5]="وصف الرابط السادس" var ns6=document.getElementById&&!document.all var ie=document.all function show_text(thetext, whichdiv){ if (ie) eval("document.all."+whichdiv).innerHTML=linktext[thetext] else if (ns6) document.getElementById(whichdiv).innerHTML=linktext[thetext] } function resetit(whichdiv){ if (ie) eval("document.all."+whichdiv).innerHTML=' ' else if (ns6) document.getElementById(whichdiv).innerHTML=' ' } // www.star28.com </script>  <p> <a href="http://www.dynamicdrive.com" onMouseover="show_text(0,'div1')" onMouseout="resetit('div1')">الرابط الأول</a> | <a href="http://www.javascriptkit.com" onMouseover="show_text(1,'div1')" onMouseout="resetit('div1')">الرابط الثاني</a> | <a href="http://www.freewarejava.com" onMouseover="show_text(2,'div1')" onMouseout="resetit('div1')">الرابط الثالث</a> <br> <FONT size="1" face="tahoma"><span id="div1"> </span></FONT> <p> <a href="http://encarta.msn.com/" onMouseover="show_text(3,'div2')" onMouseout="resetit('div2')">الرابط الرابع</a> | <a href="http://britannica.com/" onMouseover="show_text(4,'div2')" onMouseout="resetit('div2')">الرابط الخامس</a> | <a href="http://www.dictionary.com" onMouseover="show_text(5,'div2')" onMouseout="resetit('div2')">الرابط السادس</a> <br> <i><FONT size="1" face="tahoma"><span id="div2"> </span></i> </FONT>

عمل وصف للرابط عند وضع الماوس عليه 3
طريقة التركيب

1- انسخ هذا الكود و ضعه في منطقة HEAD
<script>  </script>

2- انسخ هذا الكود و ضعه في المكان الذي تريده في منطقة BODY و عدل للذي يناسبك
<TABLE width="500" border="1"><TR><TD width="20%"> <div id="scriptmenu" style="line-height:20px"><p><strong><font face="Tahoma"> <a href="../dynamicindex1/index.html" onMouseover="changetext(content[0])"><small>الرابط الأول</small></a><br> <a href="http://www.star28.com/" onMouseover="changetext(content[1])"><small>الرابط الثاني</small></a><br> <a href="http://www.star28.com/" onMouseover="changetext(content[2])"><small>الرابط الثالث</small></a><br> <a href="http://www.star28.com/" onMouseover="changetext(content[3])"><small>الرابط الرابع</small></a><br> <a href="http://www.star28.com/" onMouseover="changetext(content[4])"><small>الرابط الخامس</small></a><br> <a href="http://www.star28.com/" onMouseover="changetext(content[5])"><small>الرابط السادس</small></a><br> <a href="http://www.star28.com/" onMouseover="changetext(content[6])"><small>الرابط السابع</small></a><br> <a href="http://www.star28.com/" onMouseover="changetext(content[7])"><small>الرابط الثامن</small></a><br> <a href="http://www.star28.com/" onMouseover="changetext(content[8])"><small>الرابط التاسع</small></a></font></strong></p> </div> </TD><TD width="80%" valign="top"> <ilayer id="d1" width="200" height="200" visibility="hide"> <layer id="d2" width="200" height="200"> <div id="descriptions" align="center">  <strong><font face="Arial" color="#000000"><p>عرض وصف جميل للروابط<br> </font></strong><font face="Tahoma"><small>نتمنى أن يعجبكم ... ضع مؤشر الماوس على إحدى الروابط</small><br> </font>  </div> </layer> </ilayer></TD></TR></TABLE>

وصف متحرك للرابط عند وضع مؤشر الماوس

طريقة التركيب

انسخ هذا الكود و ضعه في المكان الذي تريده في منطقة BODY
<script type="text/javascript"> /*********************************************** * Scrolling Tooltip Script- © Dynamic Drive (www.dynamicdrive.com) * This notice must stay intact for use * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code ***********************************************/ function ietruebody(){ //Dynamicdrive added function return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body } if (!document.layers&&!document.all) event="test" function showtip2(current,e,text){ if (document.all&&document.readyState=="complete"){ document.all.tooltip2.innerHTML='<marquee direction="right" style="border:1px solid black">'+text+'</marquee>' document.all.tooltip2.style.pixelLeft=event.clientX+ietruebody().scrollLeft+10 document.all.tooltip2.style.pixelTop=event.clientY+ietruebody().scrollTop+10 document.all.tooltip2.style.visibility="visible" } else if (document.layers){ document.tooltip2.document.nstip.document.write('<b>'+text+'</b>') document.tooltip2.document.nstip.document.close() document.tooltip2.document.nstip.left=0 currentscroll=setInterval("scrolltip()",100) document.tooltip2.left=e.pageX+10 document.tooltip2.top=e.pageY+10 document.tooltip2.visibility="show" } } function hidetip2(){ if (document.all) document.all.tooltip2.style.visibility="hidden" else if (document.layers){ clearInterval(currentscroll) document.tooltip2.visibility="hidden" } } function scrolltip(){ if (document.tooltip2.document.nstip.left>=-document.tooltip2.document.nstip.document.width) document.tooltip2.document.nstip.left-=5 else document.tooltip2.document.nstip.left=150 } </script> <div id="tooltip2" style="position:absolute;visibility:hidden;clip:rect(0 150 50 0);width:150px;background-color:lightyellow" dir="ltr"> <layer name="nstip" width=1000px bgColor="lightyellow"></layer> </div> <a href="http://www.star28.com" onMouseover="showtip2(this,event,'لقد ظهر وصف الرابط .... هل أعجبك')" onMouseout="hidetip2()">ضع الماوس هنا</a>

عمل وصف للرابط يظهر في أسفل الصفحة

طريقة التركيب

1- انسخ هذا الكود و ضعه في منطقة HEAD
<script type="text/javascript"> /*********************************************** * Bottom slide tooltip- by Ron Grafe (mailto:grafer@REMOVETHIScolumbus.rr.com) * Website URL: http://www.gdevresources.com * Script modified by and available at Dynamic Drive: http://www.dynamicdrive.com/ * Translated By www.star28.com ***********************************************/ //SET TOOLTIP DESCRIPTIONS BELOW //Extend or contract array as needed var description=new Array() description[0]='وصف عادي' description[1]='<b>وصف بخط عريض' description[2]='<i>وصف بخط مائل' //Do not edit below here iens6=document.all||document.getElementById ns4=document.layers // GLOBAL VARIABLES var thename var theobj var thetext var winHeight var winPositionFromTop var winWidth var startH=2 var openTimer // END GLOBAL VARIABLES // GLOBAL FUNCTIONS function ietruebody(){ return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body } function setObj(text,theswitch,inwidth,inheight) { thetext=text if(iens6){ thename = "viewer" theobj=document.getElementById? document.getElementById(thename):document.all.thename winHeight=100 if(iens6&&document.all) { winPositionFromTop=!window.opera? ietruebody().clientHeight : document.body.clientHeight winWidth=(ietruebody().clientWidth-ietruebody().leftMargin) } if(iens6&&!document.all) { winPositionFromTop=window.innerHeight winWidth=(window.innerWidth-(ietruebody().offsetLeft+30)) } if(theswitch=="override") { winWidth=inwidth winHeight=inheight } theobj.style.width=winWidth+"px" theobj.style.height=startH+"px" if(iens6&&document.all) { theobj.style.top=ietruebody().scrollTop+winPositionFromTop+"px" //window.status=winPositionFromTop theobj.innerHTML = "" theobj.insertAdjacentHTML("BeforeEnd","<table cellspacing=0 width="+winWidth+" height="+winHeight+" border=1><tr><td width=100% valign=top><font type='times' size='2' style='color:black;font-weight:normal'>"+thetext+"</font></td></tr></table>") } if(iens6&&!document.all) { theobj.style.top=window.pageYOffset+winPositionFromTop+"px" theobj.innerHTML = "" theobj.innerHTML="<table cellspacing=0 width="+winWidth+" height="+winHeight+" border=1><tr><td width=100% valign=top><font type='times' size='2' style='color:black;font-weight:normal'>"+thetext+"</font></td></tr></table>" } } if(ns4){ thename = "nsviewer" theobj = eval("document."+thename) winPositionFromTop=window.innerHeight winWidth=window.innerWidth winHeight=100 if(theswitch=="override") { winWidth=inwidth winHeight=inheight } theobj.moveTo(0,eval(window.pageYOffset+winPositionFromTop)) theobj.width=winWidth theobj.clip.width=winWidth theobj.document.write("<table cellspacing=0 width="+winWidth+" height="+winHeight+" border=1><tr><td width=100% valign=top><font type='times' size='2' style='color:black;font-weight:normal'>"+thetext+"</font></td></tr></table>") theobj.document.close() } viewIt() } function viewIt() { if(startH<=winHeight) { if(iens6) { theobj.style.visibility="visible" if(iens6&&document.all) { theobj.style.top=(ietruebody().scrollTop+winPositionFromTop)-startH+"px" } if(iens6&&!document.all) { theobj.style.top=(window.pageYOffset+winPositionFromTop)-startH+"px" } theobj.style.height=startH+"px" startH+=2 openTimer=setTimeout("viewIt()",10) } if(ns4) { theobj.visibility = "visible" theobj.moveTo(0,(eval(window.pageYOffset+winPositionFromTop)-startH)) theobj.height=startH theobj.clip.height=(startH) startH+=2 openTimer=setTimeout("viewIt()",10) } }else{ clearTimeout(openTimer) } } function stopIt() { if(iens6) { theobj.innerHTML = "" theobj.style.visibility="hidden" startH=2 } if(ns4) { theobj.document.write("") theobj.document.close() theobj.visibility="hidden" theobj.width=0 theobj.height=0 theobj.clip.width=0 theobj.clip.height=0 startH=2 } } // END GLOBAL FUNCTIONS --> </script>

2- انسخ هذا الكود و ضعه في المكان الذي تريده في منطقة BODY
     <a href="http://www.star28.com" onmouseover="setObj(description[0],'override',550,30)" onmouseout="clearTimeout(openTimer);stopIt()">ضع مؤشر الماوس هنا و انظر الى الأسفل</a> <a href="http://www.star28.com" onmouseover="setObj(description[1],'override',550,30)" onmouseout="clearTimeout(openTimer);stopIt()">ضع مؤشر الماوس هنا و انظر الى الأسفل</a> <a href="http://www.star28.com" onmouseover="setObj(description[2],'override',550,30)" onmouseout="clearTimeout(openTimer);stopIt()">ضع مؤشر الماوس هنا و انظر الى الأسفل</a> <layer name="nsviewer" bgcolor="#FFFFCC" style="border-width:thin;z-index:1"></layer> <script type="text/javascript"> if (iens6){ document.write("<div id='viewer' style='background-color:#FFFFCC;visibility:hidden;position:absolute;left:0;width:0;height:0;z-index:1;overflow:hidden;border:0px ridge white'></div>") } if (ns4){ hideobj = eval("document.nsviewer") hideobj.visibility="hidden" } </script>

وصلات تظهر عند مرور الماوس عليها

انسخ هذا الكود و ضعه في المكان الذي تريده في منطقة BODY و عدل ما يلزم
 <a href="http://www.star28.com" onMouseover="showit(0)">دليل العرب الشامل</a> | <a href="http://www.star28.net/" onMouseover="showit(1)">المنتديات</a><br>  <ilayer width=400 height=32 name="dep1" bgColor="#E6E6FF"> <layer name="dep2" width=400 height=32> </layer> </ilayer> <div id="describe" style="background-color:#E6E6FF;width:400px;height:32px" onMouseover="clear_delayhide()" onMouseout="resetit(event)"></div> <script language="JavaScript1.2"> var submenu=new Array() //Set submenu contents. Expand as needed. For each content, make sure everything exists on ONE LINE. Otherwise, there will be JS errors. submenu[0]='<font size="2" face="Verdana"><b><a href="http://www.star28.com/">الرئيسية</a> | <a href="http://www.star28.com/site">دليل المواقع</a> | <a href="http://www.star28.com/book">الكتب الالكترونية</a> | <a href="http://www.star28.com/mail.html">راسلنا</a></b></font>' submenu[1]='<font size="2" face="Verdana"><b><a href="http://www.star28.net/vb/">الرئيسية</a> | <a href="http://www.star28.net/vb/register.php?">التسجيل</a> | <a href="http://www.star28.net/vb/search.php?do=getnew">مشاركات جديدة</a> | <a href="http://www.star28.net/vb/faq.php?">الأسئلة الشائعة</a></b></font>' //Set delay before submenu disappears after mouse moves out of it (in milliseconds) var delay_hide=500 /////No need to edit beyond here var menuobj=document.getElementById? document.getElementById("describe") : document.all? document.all.describe : document.layers? document.dep1.document.dep2 : "" function showit(which){ clear_delayhide() thecontent=(which==-1)? "" : submenu[which] if (document.getElementById||document.all) menuobj.innerHTML=thecontent else if (document.layers){ menuobj.document.write(thecontent) menuobj.document.close() } } function resetit(e){ if (document.all&&!menuobj.contains(e.toElement)) delayhide=setTimeout("showit(-1)",delay_hide) else if (document.getElementById&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget)) delayhide=setTimeout("showit(-1)",delay_hide) } function clear_delayhide(){ if (window.delayhide) clearTimeout(delayhide) } function contains_ns6(a, b) { while (b.parentNode) if ((b = b.parentNode) == a) return true; return false; } </script>

كود لعمل رابط يفتح بمجرد مرور الماوس عليه

انسخ هذا الكود و ضعه في المكان الذي تريده في منطقة BODY
<a onmouseover="parent.location='هنا ضع عنوان موقع الويب الذي تريده'">ابتعد عني</A>

رابط لفتح نافذة جديدة تستطيع التحكم بحجمها

طريقة التركيب

انسخ هذا الكود و ضعه في المكان الذي تريده في منطقة BODY
<SCRIPT>function star28() {window.open('ضع هنا الرابط','star28java','width=300 height=260')}</SCRIPT> <FONT face=Tahoma><A style="TEXT-DECORATION: none" href="javascript:star28();">اضغط هنا لتظهر النافذة.</A></FONT>

نص يتلون بشكل مذهل عند وضع الماوس عليه

طريقة التركيب

1- انسخ هذا الكود و ضعه في منطقة HEAD
<script> /***************************************** * Visit our site at http://www.star28.com/ for more code * This notice must stay intact for use ***********************************************/  </script> <STYLE TYPE="text/css">  </STYLE>

2- انسخ هذا الكود و ضعه في المكان الذي تريده في منطقة BODY
<b><DIV id="mainbody"><a id="link1" href="http://www.star28.com" onMouseOver="startanimation('link1')" onMouseOut="stopanimation()" target="_blank">ضع الماوس هنا لو سمحت</a></b>

3- عدل في الوسم BODY ليصبح مثل هذا
<body id="thisbody">

الاعلى