عرب كود - مؤثرات القوائم والجداول

قائمة متحركة على يسار الصفحة 1

عيب هذه القائمة أنها مصممة لتعمل على الصفحات التي تبدأ من اليسار

و يمكن إجراء تعديل لها لتعمل على الصفحات التي تبدأ من اليمين

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

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

2- اضغط هنا لتحميل الملف المرفق

3- بعد فك الضغط عن الملف ستجد ملفين
افتح الملف المسمى ssmItems.js و عدل فيه ما يلزم

4- ارفع الملفات الى مساحة موقعك

<><><<><><><><><><><><><><>

قائمة متحركة على يسار الصفحة 2

أيضاً يمكن التعديل بهذا الكود ليعمل بشكل صحيح على الصفحات العربية

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

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

2- انسخ هذا الكود و ضعه في المكان الذي تريده في منطقة BODY

<><><<><><><><><><><><><><>

قائمة متحركة على يسار الصفحة 3

أيضاً يمكن التعديل بهذا الكود ليعمل بشكل صحيح على الصفحات العربية

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

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

2- انسخ هذا الكود و ضعه في المكان الذي تريده في منطقة BODY

<><><<><><><><><><><><><><>

قائمة متحركة غير مخفية
طريقة التركيب

1- أضف هذه الأكواد للوسم BODY لتصبح مثل هذه

2- انسخ هذا الكود و ضعه في منطقة BODY و عدل ما يلزم

<SCRIPT LANGUAGE="JavaScript">
// www.star28.com
function setVariables() {
if (document.layers) {
v=".top=";
dS="document.";
sD="";
y="window.pageYOffset";
}
else if (document.all){
v=".pixelTop=";
dS="";
sD=".style";
y="document.body.scrollTop";
}
else if (document.getElementById){
y="window.pageYOffset";
}
}
function checkLocation() {
object="object1";
yy=eval(y);
if (document.getElementById)
document.getElementById("object1").style.top=yy
else
eval(dS+object+sD+v+yy)
setTimeout("checkLocation()",10);
}
</script>
<div id="object1" style="position:absolute; visibility:show; right:0px; top:0px; z-index:5">
<table width=150 border=0 cellspacing=20 cellpadding=0 >
<tr>
<td bgcolor="#FFFF00"><CENTER><b>حرك الصفحة للأسفل</b></CENTER></td>
</tr>
<tr>
<td bgcolor="#99FFFF"><a href="http://www.star28.com/">الرابط الأول</a></td>
</tr>
<tr>
<td bgcolor="#99FFFF"><a href="http://www.star28.com/">الرابط الثاني</a></td>
</tr>
<tr>
<td bgcolor="#99FFFF"><a href="http://www.star28.com/">الرابط الثالث</a></td>
</tr>
<tr>
<td bgcolor="#99FFFF"><a href="http://www.star28.com/">الرابط الرابع</a></td>
</tr>
</table>
</div>

<><><<><><><><><><><><><><>

قائمة متشعبة 1
طريقة التركيب

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

2- انسخ هذا الكود و ضعه في المكان الذي تريده في منطقة BODY

<div align="center"><script language="JavaScript1.2">
//reusable/////////////////////////////
var zindex=100;
function dropit2(whichone){
if (window.themenu&&themenu.id!=whichone.id)
themenu.style.visibility="hidden";
themenu=whichone;
if (document.all){
themenu.style.left=document.body.scrollLeft+event.clientX-event.offsetX;
themenu.style.top=document.body.scrollTop+event.clientY-event.offsetY+18;
if (themenu.style.visibility=="hidden"){
themenu.style.visibility="visible";
themenu.style.zIndex=zindex++;
}
else{
hidemenu();
}
}
}
function dropit(e,whichone){
if (window.themenu&&themenu.id!=eval(whichone).id)
themenu.visibility="hide";
themenu=eval(whichone);
if (themenu.visibility=="hide")
themenu.visibility="show";
else
themenu.visibility="hide";
themenu.zIndex++;
themenu.left=e.pageX-e.layerX;
themenu.top=e.pageY-e.layerY+19;
return false;
}
function hidemenu(whichone){
if (window.themenu)
themenu.style.visibility="hidden";
}
function hidemenu2(){
themenu.visibility="hide";
}
if (document.all)
document.body.onclick=hidemenu;
//reusable/////////////////////////////
</script>

<ilayer height="35px">
<layer visibility="show">
<span class="iewrap1">
<span class="iewrap2" onClick="dropit2(dropmenu0);event.cancelBubble=true;return false"><font face=Arial><b><a href="#" onClick="if(document.layers) return dropit(event, 'document.dropmenu0')">المجموعة الأولى</a></b></font>
</span>
</span>
</layer>
</ilayer><br>


<ilayer height="35px">
<layer visibility="show">
<span class="iewrap1">
<span class="iewrap2" onClick="dropit2(dropmenu1);event.cancelBubble=true;return false"><font face=Arial><b><a href="#" onClick="if(document.layers) return dropit(event, 'document.dropmenu1')">المجموعة الثانية</a></b></font>
</span>
</span>
</layer>
</ilayer><br>


<ilayer height="35px">
<layer visibility="show">
<span class="iewrap1">
<span class="iewrap2" onClick="dropit2(dropmenu2);event.cancelBubble=true;return false"><font face=Arial><b><a href="#" onClick="if(document.layers) return dropit(event, 'document.dropmenu2')">المجموعة الثالثة</a></b></font>
</span>
</span>
</layer>
</ilayer><br>


<ilayer height="35px">
<layer visibility="show">
<span class="iewrap1">
<span class="iewrap2" onClick="dropit2(dropmenu3);event.cancelBubble=true;return false"><font face=Arial><b><a href="#" onClick="if(document.layers) return dropit(event, 'document.dropmenu3')">المجموعة الرابعة</a></b></font>
</span>
</span>
</layer>
</ilayer><br>


<ilayer height="35px">
<layer visibility="show">
<span class="iewrap1">
<span class="iewrap2" onClick="dropit2(dropmenu4);event.cancelBubble=true;return false"><font face=Arial><b><a href="#" onClick="if(document.layers) return dropit(event, 'document.dropmenu4')">المجموعة الخامسة</a></b></font>
</span>
</span>
</layer>
</ilayer><br>

<div id="dropmenu0" style="position:absolute;left:0;top:0;layer-background-color:lightyellow;background-color:lightyellow;width:120;visibility:hidden;border:2px solid black;padding:0px">
<script language="JavaScript1.2">
if (document.all)
dropmenu0.style.padding="4px";
for (i=0;i<menu1.length;i++)
document.write(menu1[i]);
</script>
</div>
<script language="JavaScript1.2">
if (document.layers){
document.dropmenu0.captureEvents(Event.CLICK);
document.dropmenu0.onclick=hidemenu2;
}
</script>
<div id="dropmenu1" style="position:absolute;left:0;top:0;layer-background-color:lightyellow;background-color:lightyellow;width:120;visibility:hidden;border:2px solid black;padding:0px">
<script language="JavaScript1.2">
if (document.all)
dropmenu1.style.padding="4px";
for (i=0;i<menu2.length;i++)
document.write(menu2[i]);
</script>
</div>
<script language="JavaScript1.2">
if (document.layers){
document.dropmenu1.captureEvents(Event.CLICK);
document.dropmenu1.onclick=hidemenu2;
}
</script>
<div id="dropmenu2" style="position:absolute;left:0;top:0;layer-background-color:lightyellow;background-color:lightyellow;width:120;visibility:hidden;border:2px solid black;padding:0px">
<script language="JavaScript1.2">
if (document.all)
dropmenu2.style.padding="4px";
for (i=0;i<menu3.length;i++)
document.write(menu3[i]);
</script>
</div>
<script language="JavaScript1.2">
if (document.layers){
document.dropmenu2.captureEvents(Event.CLICK);
document.dropmenu2.onclick=hidemenu2;
}
</script>
<div id="dropmenu3" style="position:absolute;left:0;top:0;layer-background-color:lightyellow;background-color:lightyellow;width:120;visibility:hidden;border:2px solid black;padding:0px">
<script language="JavaScript1.2">
if (document.all)
dropmenu3.style.padding="4px";
for (i=0;i<menu4.length;i++)
document.write(menu4[i]);
</script>
</div>
<script language="JavaScript1.2">
if (document.layers){
document.dropmenu3.captureEvents(Event.CLICK);
document.dropmenu3.onclick=hidemenu2;
}
</script>
<div id="dropmenu4" style="position:absolute;left:0;top:0;layer-background-color:lightyellow;background-color:lightyellow;width:120;visibility:hidden;border:2px solid black;padding:0px">
<script language="JavaScript1.2">
if (document.all)
dropmenu4.style.padding="4px";
for (i=0;i<menu5.length;i++)
document.write(menu5[i]);
</script>
</div>
<script language="JavaScript1.2">
if (document.layers){
document.dropmenu4.captureEvents(Event.CLICK);
document.dropmenu4.onclick=hidemenu2;
}
</script></div>

<><><<><><><><><><><><><><>

قائمة متشعبة 2

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

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

2- انسخ هذا الكود و ضعه في المكان الذي تريده في منطقة BODY

<ul>
<li id="foldheader">المجموعة الأولى</li>
<ul id="foldinglist" style="display:none" style=&{head};>
<li><a href="http://www.">رابط 1</a></li>
<li><a href="http://www.">رابط 2</a></li>
<li><a href="http://www.">رابط 3</a></li>
</ul>
<li id="foldheader">المجموعة الثانية</li>
<ul id="foldinglist" style="display:none" style=&{head};>
<li><a href="http://www.">رابط 1</a></li>
<li><a href="http://www.">رابط 2</a></li>
<li><a href="http://www.">رابط 3</a></li>
</ul>
<li id="foldheader">المجموعة الثالثة</li>
<ul id="foldinglist" style="display:none" style=&{head};>
<li><a href="http://www.">رابط 1</a></li>
<li><a href="http://www.">رابط 2</a></li>
<li id="foldheader">مجموعة فرعية</li>
<ul id="foldinglist" style="display:none" style=&{head};>
<li><a href="http://www.">رابط  1</a></li>
<li><a href="http://www.">رابط  2</a></li>
</ul>
<li><a href="http://www.">رابط  3</a></li>
<li><a href="http://www.">رابط  4</a></li>
</ul>
</ul>
<script language="JavaScript1.2">

</script>

3- اذا أردت أن تظهر صورة السهم اضغط عليها باليمين ثم حفظ باسم و ارفعها الى مجلد صفحتك

<><><<><><><><><><><><><><>

روابط ضمن مربع اختيار

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

انسخ هذا الكود و ضعه في المكان الذي تريده في منطقة BODY

<><><<><><><><><><><><><><>

روابط تظهر عند النقر بزر الماوس اليمين 1

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

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

2- انسخ هذا الكود و ضعه في المكان الذي تريده في منطقة BODY

روابط تظهر عند النقر بزر الماوس اليمين 2

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

انسخ هذا الكود و ضعه في منطقة HEAD

<><><<><><><><><><><><><><>

جدول يتغير ألوانه و يظهر وصف الرابط عند وضع الماوس عليه

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

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

2- انسخ هذا الكود و ضعه في المكان الذي تريده في منطقة BODY

<table bgcolor="black" border="1" bordercolor="ivory" cellpadding="2" cellspacing="0" width="150">
<tr>
<td class="star28" bordercolor="black" id="choice1" style="background-color:bisque; cursor:hand" onmouseover="movein(this,'موقع متعوب عليه')" onmouseout="moveout(this)">
<a href="http://www.star28.com/index.html">دليل العرب الشامل</a></td></tr>
<tr>
<td class="star28" bordercolor="black" id="choice2" style="background-color:bisque; cursor:hand" onmouseover="movein(this,'أكواد جاهزة للعمل على الصفحات العربية')" onmouseout="moveout(this)">
<a href="http://www.star28.com/java/index.html">قسم الجافا</a></td></tr>
<tr>
<td class="star28" bordercolor="black" id="choice3" style="background-color:bisque; cursor:hand" onmouseover="movein(this,'باقة مختارة من الكتب التعليمية المفيدة')" onmouseout="moveout(this)">
<a href="http://www.star28.com/book/index.html">قسم الكتب الإلكترونية</a></td></tr>
<tr>
<td class="star28" bordercolor="black" id="choice4" style="background-color:bisque; cursor:hand" onmouseover="movein(this,'اذا كانت لديك اية استفسارات')" onmouseout="moveout(this)">
<a href="http://www.star28.com/mail.html">راسلنا</a></td></tr>
<tr>
<td bordercolor="black" bgcolor="#CCFFFF" height="18"><font id="boxdescription" face="Tahoma" size="2"></font></td></tr>
</table>

<><><<><><><><><><><><><><>

قائمة تظهر من رأس الصفحة بشكل جميل

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

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

2- عدل في الوسم BODY ليظهر مثل هذا

3- انسخ هذا الكود و ضعه في المكان الذي تريده في منطقة BODY

<div id="object1" style="position: absolute; visibility: show; left: 50px; top: -50px; z-index: 2; cursor: se-resize">
<table border=1 width=150 bgcolor=#0066cc><tr>
<td>
<center>
<a href="http://www.star28.com/" style="color: #ffffff; cursor: se-resize"><B>دليل العرب الشامل</B></a>
</center>
</td>
</table>
</div>
<div id="object2" style="position: absolute; visibility: show; left: 50px; top: -50px; z-index: 2; cursor: se-resize">
<table border=1 width=150 bgcolor=#0066cc><tr>
<td>
<center>
<a href="http://www.star28.com/" style="color: #ffffff; cursor: se-resize"><B>رابط رقم 1</B></a>
</center>
</td>
</table>
</div>
<div id="object3" style="position: absolute; visibility: show; left: 50px; top: -50px; z-index: 2; cursor: se-resize">
<table border=1 width=150 bgcolor=#0066cc><tr>
<td>
<center>
<a href="http://www.star28.com/" style="color: #ffffff; cursor: se-resize"><B>رابط رقم 2</B></a>
</center>
</td>
</table>
</div>
<div id="object4" style="position: absolute; visibility: show; left: 50px; top: -50px; z-index: 2; cursor: se-resize">
<table border=1 width=150 bgcolor=#0066cc><tr>
<td>
<center>
<a href="http://www.star28.com/" style="color: #ffffff; cursor: se-resize"><B>رابط رقم 3</B></a>
</center>
</td>
</table>
</div>
<div id="object5" style="position: absolute; visibility: show; left: 50px; top: -50px; z-index: 2; cursor: se-resize">
<table border=1 width=150 bgcolor=#0066cc><tr>
<td>
<center>
<a href="http://www.star28.com/" style="color: #ffffff; cursor: se-resize"><B>رابط رقم 4</B></a>
</center>
</td>
</table>
</div>
<div id="object6" style="position: absolute; visibility: show; left: 50px; top: -50px; z-index: 2; cursor: se-resize">
<table border=1 width=150 bgcolor=#0066cc>
<tr><td>
<center>
<a href="http://www.star28.com/" style="cursor: se-resize; color: #FFFFFF"><B>رابط رقم 5</B></a>
</center>
</td>
</table>
</div>

<><><<><><><><><><><><><><>

قائمة شفافة جميلة

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

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

<script language="JavaScript">
/*****************************************
* Translated By www.star28.com/
* Visit our site at http://www.star28.com/ for more code
***********************************************/
var isIE4 = false;
function CheckBrowser()
{ if (navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion.charAt(0) >= 4) { isIE4 = true; }}
function mOvr(src,clrOver)
{ if (!src.contains(event.fromElement)) { src.style.cursor = 'hand'; src.bgColor = clrOver; src.children.tags('A')[0].style.color = '#ffffff';}}
function mOut(src,clrIn)
{ if (!src.contains(event.toElement)) { src.style.cursor = 'default'; src.bgColor = clrIn;  src.children.tags('A')[0].style.color = '#ffffff';}}
function mClk(src)
{ if(event.srcElement.tagName=='TD'){src.children.tags('A')[0].click();} }
function mOvrTop(src,clrOver)
{ if (!src.contains(event.fromElement)) { src.style.cursor = 'hand'; src.bgColor = clrOver;}}
function mOutTop(src,clrIn)
{ if (!src.contains(event.toElement)) { src.style.cursor = 'default'; src.bgColor = clrIn;}}
</script>

2- انسخ هذا الكود و ضعه في المكان الذي تريده في منطقة BODY

<table cellspacing="3" cellpadding="0" border="0" width="420" align="center" bgcolor="#003366">
<tr>
<td align="center" width="105" onmouseover="mOvr(this,'#9999cc');" onmouseout="mOut(this,'#666699');" onclick="mClk(this);" bgcolor="#666699">
<a style="color: #FFFFFF" href="http://www.star28.com/"><font face="Tahoma" size="-2">دليل العرب الشامل</font></a>
</td>
<td align="center" width="105" onmouseover="mOvr(this,'#9999cc');" onmouseout="mOut(this,'#666699');" onclick="mClk(this);" bgcolor="#666699">
<a style="color: #FFFFFF" href="http://www.aljazeera.net/"><font face="Tahoma" size="-2">الجزيرة نت</font></a>
</td>
<td align="center" width="105" onmouseover="mOvr(this,'#9999cc');" onmouseout="mOut(this,'#666699');" onclick="mClk(this);" bgcolor="#666699">
<a style="color: #FFFFFF" href="http://www.swalif.net/"><font face="Tahoma" size="-2">سوالف</font></a>
</td>
<td align="center" width="105" onmouseover="mOvr(this,'#9999cc');" onmouseout="mOut(this,'#666699');" onclick="mClk(this);" bgcolor="#666699">
<a style="color: #FFFFFF" href="http://www.star28.net/vb"><font face="Tahoma" size="1">المنتديات</font></a>
</td>
</tr>
</table>

<><><<><><><><><><><><><><>