بحث متقدم | التسجيل
الويب العربي
  تسجيل دخول
 
   
   

  ملاحظة
الموقع متاح للإطلاع والقراءة فقط، المشاركة والمواضيع الجديدة غير متاحة حالياً لحين تطوير الموقع.




الموقع متاح للإطلاع والقراءة فقط، المشاركة والمواضيع الجديدة غير متاحة حالياً لحين تطوير الموقع.

عـودة للخلف   الويب العربي دليل ومكتبة الويب العربي مكتبة الويب العربي ويب 2.0 وأكواد متنوعة

بحث
links

ويب 2.0 وأكواد متنوعة
ويب 2.0 وأكواد وأدوات متنوعة لتطوير المواقع
Ajax , XML , CSS , JavaScript ...etc

المحتويات
zip  DHTML لإعطاء حريّة للزائر لتغيير لون خلفية الصفحة -حصريّاً الزر الأيسر : حفظ ، الزر الأيمن : حفظ بإسم

  نبذة :هذا الهاك يضيف 3 كونترول بار للتحكّم فى الكود اللونى لخلفية الصفحة بما يتوافق ورغبة زائر موقعك

أعطى الزائر احساس بالحرية والتحكّم فى الموقع وطريقة رؤيته له




مثال

فضلاً اضغط هنا وقم بتغيير لون خلفية الصفحة عن طريق بارات التحكّم الى اللون الذى تريد

استمتع بتغيير لون خلفية صفحتك ومتّع زوّارك



التركيب :

1-- انسخ هذا الكود بجزء الـ HEAD من صفحتك


كود:
<style>.drag {position: relative; cursor: hand}</style>
<SCRIPT LANGUAGE="JavaScript1.2">


var sPosition;
var showPerc=100;
dcidocument.onmousedown=dragLayer
dcidocument.onmouseup=new Function("dragMe=false")

var Color= new Array();
Color[0] = "00";
Color[1] = "11";
Color[2] = "22";
Color[3] = "33";
Color[4] = "44";
Color[5] = "55";
Color[6] = "66";
Color[7] = "77";
Color[8] = "88";
Color[9] = "99";
Color[10] = "AA";
Color[11] = "BB";
Color[12] = "CC";
Color[13] = "DD";
Color[14] = "EE";
Color[15] = "FF";


var rVal,gVal,bVal, cCol
function chgBg() {
	cCol = dcidocument.bgColor; rVal=cCol.substr(1,2); gVal=cCol.substr(3,2); bVal=cCol.substr(5,2);
	ind = Math.round(showPerc/16); if (ind < 0) ind = 0; if (ind > 15) ind=15;
	
	
// If more sliders are used, each of them has to be handled separately
	if (kObj.id =="knobImg") dcidocument.bgColor="#"+Color[ind]+gVal+bVal;
	if (kObj.id =="knobImg1")  dcidocument.bgColor="#"+rVal+Color[ind]+bVal;
	if (kObj.id =="knobImg2")  dcidocument.bgColor="#"+rVal+gVal+Color[ind];
}


var dragMe=false, kObj, yPos,direction
function moveLayer() {
if (event.button==1 && dragMe) {
	oldY = kObj.style.pixelTop; kObj.style.pixelTop=temp2+event.clientY-yPos; 
// Limit movement of knob to stay inside layer
	if (kObj.style.pixelTop > oldY) direction="dn"; else direction="up";
	if (kObj.style.pixelTop < 2 && direction=="up") {kObj.style.pixelTop=2; direction="dn";}
	if (kObj.style.pixelTop > 102 && direction=="dn") {kObj.style.pixelTop=102; direction="up";}
// Set working variable 'showPerc' depending on 100 or 250 scaling
	sPosition=kObj.style.pixelTop; showPerc = (perCent[0].checked) ? sPosition-2 : (sPosition-2)/2*5; 
// The following line should be replaced by the function-call with the actual task to perform
	chgBg(); 
	return false; }
}
function dragLayer() {
if (!dcidocument.all) return;
if (event.srcElement.className=="drag")	{dragMe=true; kObj=event.srcElement; temp2=kObj.style.pixelTop; yPos=event.clientY; dcidocument.onmousemove=moveLayer; }
}
</script>

2-- أضف هذا الكود فى المكان او البلوك الذى تريد ظهور البارات فيه



كود:
<div id="outerLyr" style="position:absolute; width:23px; height:120px; z-index:1; left: 155px; top: 111px; background-color: #000000"> 
	<p align="center"><font color="#0000FF"><b> 
	<img id="knobImg" src="knob.jpg" class="drag" style="width: 20px; height: 17px; z-index:3; left: 2px; top: 100px">
  	</b></font></p>
  <div id="innerLyr" style="position:absolute; width:20px; height:117px; z-index:2; background-color: #777777; left: 2px; top: 2px">
    <div id="barLyr" style="position:absolute; width:2px; height:110px; z-index:1; background-color: #000000; left: 9px; top: 5px">
		<p align="center"></div>
  </div>
</div>
<div id="outerLyr1" style="position:absolute; width:23px; height:120px; z-index:1; left: 185px; top: 111px; background-color: #000000"> 
	<p align="center"><font color="#0000FF"><b> 
	<img id="knobImg1" src="knob.jpg" class="drag" style="width: 20px; height: 17px; z-index:3; left: 2px; top: 100px">
  	</b></font></p>
  <div id="innerLyr1" style="position:absolute; width:20px; height:117px; z-index:2; background-color: #777777; left: 2px; top: 2px">
    <div id="barLyr1" style="position:absolute; width:2px; height:110px; z-index:1; background-color: #000000; left: 9px; top: 5px">
		<p align="center"></div>
  </div>
</div>
<div id="outerLyr2" style="position:absolute; width:23px; height:120px; z-index:1; left: 215px; top: 111px; background-color: #000000"> 
	<p align="center"><font color="#0000FF"><b> 
	<img id="knobImg2" src="knob.jpg" class="drag" style="width: 20px; height: 17px; z-index:3; left: 2px; top: 100px">
  	</b></font></p>
  <div id="innerLyr2" style="position:absolute; width:20px; height:117px; z-index:2; background-color: #777777; left: 2px; top: 2px">
    <div id="barLyr2" style="position:absolute; width:2px; height:110px; z-index:1; background-color: #000000; left: 9px; top: 5px">
		<p align="center"></div>
  </div>

</div>


وهذا الكود بمكان وضع اختيار الموود اللونى

كود:
<p align="center"><font color="#0000FF">
	<input type="radio" name="perCent" value="false" style="font-weight: 700"><b>مدى لونى صغير =50
	</b>
	<input type="radio" name="perCent" value="true" checked style="font-weight: 700"><b>255
	</b></font></p>

أطيب تحية

قسم : ويب 2.0 وأكواد متنوعة 
 
مفضل Remove from My Favourites إرسال هذه الصفحة لصديق محتويات أخرى مقترحة
بواسطة : محمّد نور ابحث عن جميع المحتويات المضافة بواسطة هذا العضو
27-12-2007
الزيارات 217
206 بايت
 
 

قسم :
 
إنتقل إلى

جميع الأوقات بتوقيت مكة المكرمة. الساعة الآن » 07:11 AM.

Powered by vBulletin
Copyright ©2000 - 2021, Jelsoft Enterprises Ltd.


 
 »  خدمات البرمجة   »  رئيسية الدليل
  »  خدمات التصميم   »  الأمن والحماية
  »  الدعاية والتسويق
  »  الدعم والتطوير
  »  الشركات الرسمية
  »  حجز دومينات
  »  خدمات الإستضافة
 
 
  »  مكتبة الإستايلات   »  رئيسية المكتبة
  »  أكواد برمجية   »  أدوات الويب ماسترز
  »  مكتبة الهاكات   »  أدوات المصممين
  »  سكربتات متنوعة
  »  مجلات إلكترونية
  »  بلوكات متنوعة
  »  ثيمات مختلفة
 
 

صحيفة متخصصة في متابعة أخبار وجديد الإنترنت العربي
والحوارات الصحفية ومعلومات تقنية متنوعة .

   
 
 

للتواصل مع فريق عمل الويب العربي
يمكنك ذالك من خلال مركز الدعم والمساندة.

 الدعم الفني |  اعتماد العضويات |  قوانين الإنتساب |  إتفاقية الإستخدام |  أهداف الويب العربي |  دليل الشركات |  مكتبة الويب |  صحيفة الويب العربي |  الرئيسية