نوافذ وقوائم
قائمة عامودية متحركة مع الصفحة
<script language="Javascript1.2"> //configure below variable for menu width, position on page var menuwidth=110 var offsetleft=10 var offsettop=90 function makeStatic() { if (document.all) {object1.style.pixelTop=document.body.scrollTop+offsettop} else{eval(document.object1.top=eval(window.pageYOffset+offsettop));} setTimeout("makeStatic()",0); } if (document.all) {document.write('<DIV ALIGN="CENTER" ID="object1" STYLE="Position:absolute; Top:20; Left:'+offsetleft+'; Z-Index:5;cursor:hand;background-color:black"><TABLE BORDER="1" width="'+menuwidth+'" CELLPADDING="0" CELLSPACING="0" BORDERCOLOR="black" bgcolor="white">')} else if (document.layers){ document.write('<LAYER top="20" name="object1" left="'+offsetleft+'" BGCOLOR=black><TABLE BORDER="0" CELLPADDING="0" CELLSPACING="1"><TR><TD><TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0" width="'+menuwidth+'">')} if (document.all||document.layers) document.write('<TR><TD BGCOLOR="#3399FF" BORDERCOLORDARK="#99CCFF" BORDERCOLORLIGHT="#003399"><P ALIGN=CENTER><FONT SIZE="4" FACE=ARIAL>Menu</FONT></TD></TR>') var menui = new Array(); var menul = new Array(); //configure below for menu items. Extend list as desired menui[0]="صفحة البدايه"; menui[1]="الصفحة الثانية"; menui[2]="الصفحه الثالثة"; menui[3]="الصفحة الرابعة"; menui[4]="الصفحة الخامسة"; menui[6]="الصفحة السادسة"; menui[7]="الصفحة السابعة"; menui[5]="الصفحه الثامنة"; menul[0]="عنوان البداية"; menul[1]="عنوان الثانية"; menul[2]="عنوان الثالثة"; menul[3]="عنوان الرابعة"; menul[4]="عنوان الخامسة"; menul[5]="عنوان السادسة"; menul[6]="عنوان السابعة"; menul[7]="عنوان الثامنة"; for (i=0;i<=menui.length-1;i++) if (document.all) {document.write('<TR><TD BORDERCOLOR= "white"ONCLICK="location= \''+menul[i]+'\'"onmouseover="className= \'menuh\'"onMouseout="className=\'menu\'"><CENTER><FONT>'+menui[i]+'</FONT></TD></TR>')} else if (document.layers){document.write('<TR><TD BGCOLOR="white"><ILAYER><LAYER width= "'+menuwidth+'"onmouseover="bgColor= \'yellow\'"onmouseout="bgColor=\'white\'"><CENTER><A HREF="'+menul[i]+'" class=menulinks>'+menui[i]+'</A></CENTER></LAYER></ILAYER></TD></TR>')} if (document.all) {document.write('</TABLE></DIV>')} else if (document.layers){document.write('</TABLE></TD></TR></TABLE></LAYER>')} function menu3(){ if (document.all||document.layers) makeStatic() } window.onload=menu3 //--> </script>
قائمة منسدلة
انسخ الكود والصقه في الجسم <TD bgColor=#ffffff width="12%"> <FORM name=jump><SELECT name=menu size=1> <OPTION selected value=عنوان القائمة>القائمة</OPTION> <OPTION value=عنوان الرئيسية>الصفحة الرئيسية</OPTION><OPTION value=عنوان الأولى>الصفحة الأولى</OPTION> <OPTION value=عنوان الثانية>الصفحة الثانية</OPTION> <OPTION value=عنوان الثالثة>الصفحة الثالثة</OPTION> <OPTION value=عنوان الرابعة>الصفحة الرابعة</OPTION> <OPTION value=عنوان الخامسة>الصفحة الخامسة</OPTION> <OPTION value=عنوان السادسة>الصفحة السادسة</OPTION><OPTION value=عنوان السابعة>الصفحة السابعة</OPTION><OPTION value=عنوان الثامنة>الصفحة الثامنة</OPTION><OPTION value=عنوان التاسعة>الصفحة التاسعة</OPTION></SELECT> <INPUT id=button1 name=button1 onclick=location=document.jump.menu.options[document.jump.menu.selectedIndex].value; style="BACKGROUND-COLOR: #c8d6d6; COLOR: #000000; FONT-FAMILY: Tahoma; FONT-SIZE: 12px" type=button value="اذهب"> </FORM>
قائمة اختر واذهب
1- انسخ الكود التالي لمنطقة الرأس : <SCRIPT LANGUAGE="JavaScript"> <!-- Begin function formHandler(form){ var URL = document.form.site.options[document.form.site.selectedIndex].value; window.location.href = URL; // End --> } </SCRIPT> 2- انسخ الكود التالي لمنطقة الجسم : <center> <form name="form"> <select name="site" size=1> <option value="">Go to.... <option value="http://www.yahoo.com">Yahoo <option value="http://www.metacrawler.com">Metacrawler <option value="http://www.des4arab.com">المصمم العربي <option value="http://www.webcrawler.com">Webcrawler <option value="http://www.lycos.com">Lycos <option value="http://javascript.internet.com">JavaScript Source </select> <input type=button value="Go!" onClick="javascript:formHandler()"> </form> </center>
نافذة من غير اطار تفتح بالضغط على زرار
لاتنسى وضع عنوان الصورة في المكان المخصص لها بالكود
الخطوة الأولى/ ضع الكود التالي في منطقة الراس : <SCRIPT LANGUAGE="JavaScript"> <!-- Begin function popUp() { props=window.open('ضع عنوان الصفحة هنا', 'poppage', 'toolbars=0, scrollbars=0, location=0, statusbars=0, menubars=0, resizable=1, width=500, height=500, left = 150, top = 50'); } // End --> </script> الخوط الثانية/ ضع الكود التالي في أي مكان من منطقة الجسم : <form> <input type=button value="اضغط هنا" onClick="javascript:popUp()"> </form>
نافذة جميلة تتحرك مع الشريط المتحرك
تظهر هذه النافذة بالضغط على وصلة منها
نافذة إعلانات تظهر تلقائيا
الخطوة الأولى/ ضع الكود التالي في منطقة الراس : <SCRIPT LANGUAGE="JavaScript"> <!-- Begin function popUp() { props=window.open('ضع عنوان الصفحة هنا', 'poppage', 'toolbars=0, scrollbars=0, location=0, statusbars=0, menubars=0, resizable=1, width=500, height=500, left = 150, top = 50'); } // End --> </script> الخطوة الثانية/ انسخ الكود التالي مع بداية منطقة البودي Body : <BODY onLoad="javascript:popUp()">
نافذة مع الشريط المتحرك وشريط المعلومات
وهي كالنافذة السابقة تظهر بالضغط على وصلة منها
أولا / ضع الكود التالي في منطقة الرأس : <SCRIPT LANGUAGE="JavaScript"> <!-- Begin function popUp() { props=window.open('عنوان الصفحة', 'poppage', 'toolbars=0, scrollbars=1, location=0, statusbars=1, menubars=0, resizable=1, width=500, height=500, left = 150, top = 50'); } // End --> </script> </script> ثانيا/ ضع الكود التالي في أي مكان من منطقة الجسم : <A HREF="javascript:popUp()">اضغط هنا </A>
نافذة تسال الزائر عن إسمه
<script Language="JavaScript">var name=prompt("ممكن اتعرف على إسمك")</script> <script Language="JavaScript">document.write(name);</script>
نافذة للترحيب بالزوار حسب الوقت
<script LANGUAGE="JavaScript"> <!-- currentTime = new Date(); if (currentTime.getHours() < 12) document.write("صباح الخير"); else if (currentTime.getHours() < 17) document.write("مساء الخير"); else document.write("عمت مساءا"); //--> </script>
نافذة من غير اطار تفتح بالضغط على وصلة
أولا/ ضع الكود التالي في منطقة الراس : <SCRIPT LANGUAGE="JavaScript"> <!-- Begin function popUp() { props=window.open('ضع عنوان الصفحة هنا', 'poppage', 'toolbars=0, scrollbars=0, location=0, statusbars=0, menubars=0, resizable=1, width=500, height=500, left = 150, top = 50'); } // End --> </script> ثانيا/ ضع الكود التالي في أي مكان من منطقة الجسم : <A HREF="javascript:popUp()">اضغط هنا </A>
فتح نافذة بكامل الشاشة
<head> <script language="JavaScript"> <!-- Begin function openFullscreen(page) { var yes = 1; var no = 0; var menubar = no; // The File, Edit, View Menus var scrollbars = yes; // Horizontal and vertical scrollbars var locationbar = no; // The location box with the site URL var directories = no; // the "What's New", "What Cool" links var resizable = no; // Can the window be resized? var statusbar = no; // Status bar (with "Document: Done") var toolbar = no; // Back, Forward, Home, Stop toolbar windowprops = "width=" + (screen.width-10) + ",height=" + (screen.height-50) + ",top=0,left=0"; windowprops += (menubar ? ",menubars" : "") + (scrollbars ? ",scrollbars" : "") + (locationbar ? ",location" : "") + (directories ? ",directories" : "") + (resizable ? ",resizable" : "") + (statusbar ? ",status" : "") + (toolbar ? ",toolbar" : ""); window.open(page, 'fullPopup', windowprops); } // End --> </script> </HEAD> <!-- STEP TWO: Copy this code into the BODY of your HTML document --> <center> <form> <input type=button value="أضغط هنا" onClick="openFullscreen('http://www.yahoo.com');"> </form> </center>