مثال : Demo

اضغط هنا لزيارة صفحة المثال

الشرح :

طبعا ، حتى اتمكن من إظهار محتوياتي كما أريد و بكل حرية ، لابد ان تكون النافذة من نوع div عادية ، و ليس من نوافذ الجافا سكربت المعروفة ، لذلك سأستعمل هذا الكود html لعرض النافذة ، وما بداخلها :

<div id="hideshow" >
	<div id="fade"></div>
 
	<div class="popup_block">
		<div class="popup">
			<a id="aa" href="javascript:hideDiv()">
				<img src="images/close.png" class="cntrl" title="أغلق" />
			</a>
			<h3>عنوان</h3>
			<p>هنا المحتوى او النص</p>
 
		</div>
	</div>
</div>

تم استعمال صورة واحدة ، و هي صورة إغلاق النافذة ، ستجدها هنا :
سأجعل للنافذة زرا كالتالي :

<a href="#" id="ee">اضغط هنا لإظهار النافذة</a>

طبعا بعد ملأ الصفحة بالمحتويات ، هذا فقط مثال ،
تنسيقات css :

/*
	** Fez-Soft
	** 2009
 
*/
body {
	height: 100%;
	margin: 0;
	padding: 40px;
	font:  12px tahoma;
	background: #eee;
	position: relative;
}
 
h1 ,  #ee{
	font:24px "times new roman";
}
img {
	border: none;
}
#hideshow {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}
#fade {
	background: #000; 
	position: fixed; 
	width: 100%;
	height: 100%;
	filter:alpha(opacity=80);	/* الشفافية من جيل css3 */
	opacity: .80;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; /*--IE 8 شفافية --*/
	left: 0;
	z-index: 10;
}
.popup_block {
	background: #ddd;
	padding: 10px 20px;
	border: 10px solid #fff;
	float: left;
	width: 480px;
	position: fixed;
	top: 20%;
	left: 50%;
	margin: 0 0 0 -250px;
	z-index: 100;
 
}
.popup_block .popup {
	float: right;
	width: 100%;
	background: #fff;
	margin: 10px 0;
	padding: 10px 0;
	border: 1px solid #bbb;
}
.popup h3 {
	margin: 0 0 20px;
	padding: 5px 10px;
	border-bottom: 1px solid #bbb;
	font: 18px "times newroman";
}
.popup p {
	padding: 5px 10px;
	margin: 5px 0;
	font: 12px tahoma;
}
.popup img.cntrl {
	position: absolute;
	right: -20px;
	top: -20px;
}

عادي جدا ، تم استعمال الشفافية فيه من css3 ، بالنسبة لل ie6 لن أضع له أي ترقيع هنا ، مع انني عملته ، لأنني قررت ألا أدعمه في الدروس ، لعلنا نتقدم بمتصفحاتنا و تفكيرنا

بالنسبة لكود jQuery فهو كالتالي :

jQuery.fn.fadeToggle = function(s, fn){
   return (this.is(":visible"))
   ? this.fadeOut(s, fn)
   : this.fadeIn(s, fn);
};
 
$(document).ready(function(){
    $("#hideshow").hide();
    $("#ee").click(function () {
      $("#hideshow").fadeToggle(2000);
	});
	$("#aa").click(function () {
      	$("#hideshow").fadeOut(2000);
    });
});

ملاحظة أخيرة ، لا تعمل الحركة في صفحة لا تستعمل كل الصفحة ، أي تترك مكانا شاغرا غير مستعمل ولو بالتصميم . لأنه بعد استدعاء النافذة ، سيتم إظهارها فقط في هذا الجزء المستعمل من الصفحة في كل المتصفحات ما عدى موزيلا فايرفوكس ، لذلك لتتفادى هذا ، اجعل التصميم أو المحتوى يملأ كل صفحتك .

اتمنى التوفيق للجميع في مشاريعه
و السلام عليكم ورحمة الله وبركاته

مثال : Demo

يمكنك رؤية مثال للتطبيق من هنا

الشرح:

سأستعمل في التطبيق التالي وسوم dl , dt , dd ، يمكنك ان تستعمل أي وسوم أخرى مثل div إلا أنني أكره تكرار

<br />

في كل مرة ، لذلك فضلت استعمال الوسوم التي ذكرت
كود xhtml للمحتوى :

<dl> 
    <dt>عنوان</dt> 
    <dd>محتوى</dd> 
</dl>

يمكنك تكرار العملية كما تريد ، تنسيق Css ، عادي جدا ، لا علاقة له بديناميكية التطبيق ، فقط جمالية :

dt {
	color:#369;
	font: 18px "times new roman";
	border-bottom: 1px dashed #bbb;
	padding: 5px 10px;
	cursor: pointer;
}
dd {
	font:bold 16px arial;
	padding: 10px;
}

هذا تنسيقي ، يمكنك ان تستعمل ما يلائمك ، لم يبق إلا التطبيق و أوامر jQuery التي سأستعمل ، لذلك تابع معي جيدا ، سأستدع المكتبة في وسم head كما تعودنا :

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

و نجهز الكود الذي سنبدأ العمل عليه :

<script type="text/javascript">
$(document).ready(function() {
// هنا الأوامر
});
</script>

أحتاج لإخفاء المحتوى الذي تحت العنوان و الذي داخل وسم dd :

$("dd").hide();

هنا المحتوى مخفي ولا يمكن إظهاره أبدا ، يمكنني أن أظهره بمجرد الضغط على العنوان هكذا :

$("dt").click(function() { 
	// سيتم إظهار المحتوى المخفي عند النقر على العنوان
	$(this).next().show(); 
});

هذه الطريقة تمكنني أن أن أظهر ( دون ان اخفي ) المحتوي ، لكن من دون أي تأثير ، وهي طريقة أظن انها قديمة ، لذلك يمكنني استعمال دوال اخرى مثل slideUp() لتأثير الانزلاق عند الفتح ، و slideDown() ، للتأثير بالعكس :

$("dt").click(function() {
	$("dd").slideUp();
	$(this).next().slideDown();
});

إلى هنا ، تم التطبيق بنجاح ، ولو جربت الكود كاملا سيعمل بكفاءة ، فقط ستلاحظ مشكلا صغيرا ، وهو انه عند الفتح لا يتم الغلق أبدا ، بل يتم تطبيق الانزلاق على المحتوى فيبقى يفتح و يغلق مرتين و يتم التكرار وهنا المشكل : حاولت أن أتفاداه بشرط ونجح الأمر ولله الحمد ، تفضل :

$("dt").click(function() {// عند الضغط على العنوان
//سيتم التحقق بهذا الشرط
	if($(this).next().is(":visible") == false) {// إذا كان المحتوى مخف
		$("dd").slideUp();// أظهره بتأثير انزلاق للاعلى
		$(this).next().slideDown();// و عند الضغط على محتوى آخر أخفه بتأثير انزلاق نحو الأسفل
	}
});// إلى هنا انتهينا من المشكل

اقرا التعليقات فهي تفسر نفسها ، الآن بعد ان فهمنا مراحل العمل ، و كل دالة على حدى ، وطريقة التطبيق ، ما بقيت إلا الهدية التي ينتظرها الكل ، وهي الكود كاملا ، تفضل هنيئا مريئا :

<script type="text/javascript">
$(document).ready(function() {
	$("dd").hide();
	$("dt").click(function() {
		if($(this).next().is(":visible") == false) {
			$("dd").slideUp();
			$(this).next().slideDown();
		}
	});
});
</script>

فقط ملاحظة اخيرة ، في بعض المرات ، قد تحتاج أن تجعل dt واحدة ظاهر دائما ، ولا تطبق عليا الحركة ، ومن العيب أن تجعل لها مؤشر عبارة عن pointer كما عملت أنا ، قد توحي أنه يوجد رابط ولا يوجد شيء ، لذلك يمكنك ان تنزع تأثير المؤشر على dt كاملة و تجعله فقط على التي احتجت في التطبيق بإدخال امر css داخل كود جافاسكربت ن وقد شرحنا هذا من قبل ، هكذا :

$("dt").css("cursor", "pointer");

تطبيقا موفقا ، و أفكار مباركة ، و صلى الله علي محمد وعلى آله و صحبه و سلم تسليما كثيرا ، و السلام عليكم ورحمة الله

مثال Demo

لرؤية مثال على درسنا ، اضغط هنا .

فكرة الدرس و أدواته :

الفكرة و هي تصميم صورة متومجة فيها اكثر من مكان و أكثر من طبقة للألوان ، بحث عند التحريك تعطينا تأثيرا و كأننا نعمل حركات فلاشية على الخلفية.

سأحتاج في الدرس إلى مكتبة jQuery و هذا شيء عادي ، و كذلك ملف ملحق لتحريك الخلفية ، كما أنني سأصمم خلفية بسيطة متموجة أستطيع من خلالها عمل حركة أخدع بها الزائر و أعطي نوع من الجمالية على مشروعي :

سأفتح برنامج Photoshop و سأعمل المراحل التالية :

ساحصل على الصورة التالية و هي التي سأستعمل في تطبيقي :

طريقة العمل :

سأبدأ في التوزيع ، ساعمل قائمة عادية لعناوين مهمة ، و سأجعلها أفقية ، كود xhtml بسيط :

<ul id="a">
	<li><a href="#">الرئيسية</a></li>
	<li><a href="#">المدونة</a></li>
	<li><a href="#">خدمات</a></li>
	<li><a href="#">اتصل بنا</a></li>
</ul>

وهو كود خاص بقائمة ul فيها عناوين li بها روابط a ، شيء عادي جدا ، بالنسبة للـ id الذي سميته a هذا لتمييز القائمة عن غيرها لأنني استعملت أكثر من قائمة في تطبيقي ، يمكنك الاستغناء عنه أو استبداله بما يصلح لك .

كود css التابع لهذه القائمة :

ul, ul li {
	margin:0;
	padding:0;
}
ul {
	list-style:none; /*  لحذف نقط التابعة للقائمة */
}
li {
	float:right;
	width:100px;
	text-align:center;
	}
li a {
	font: 12px tahoma;
	display:block;	/* لجعل الرابط يملأ كل li */
	padding:10px 20px;
	height:100%;
	color:#000;
	text-decoration:none;
	border-right:1px solid #FFF;
	background:url(bg.jpg) repeat -20px 35px;
}

اقرأ التعليقات ..
الآن قائمتي جيدة ، و عادية جدا ، إلا أنك ستلاحظ أنني لم أضف li a:hover ، لأنني سأضيفها داخل كود js

بعد استدعائنا للمكتبة في وسم الهيد + الملف المحلق المسسول عن تحريك الخلفية ، يمكنك أن قراءته من هنا فهو بسيط إن شاء الله . نشرع في بناء كود تطبيقنا :
أولا سأحتاج لتوضيح الفكرة ، لتأثير يجب أن يطبق عند دخول المأشر على القائمة ، و عند خروجه ، وهنا سأحتاج لحدثين ، mouseover الخاص بدخول المؤشر على المكان المحدد ، mouseout عند خروج المؤشر ..

.mouseover(function(){
	$(this).stop().animate({backgroundPosition:"(-20px 94px)"}, {duration:500})
})

ما عملناه هنا ، وهو عند دخول المؤشر على منطقة الرابط ، سيتم تغيير الخلفية من المكان الافتراضي إلى المكان الجديد (-20px 94px) . ولا تنس duration في تحديد مدة الانتقال ، 500 عادية في نظري ، لو أردتها بطيئة أكثر ، يمكنك الزيادة فيها الى اي رقم يظهر لك .
نفس الشيء سأعمله عند خروج المؤشر من مكان الرابط ، إلا أنني سأغير مكان الخلفية ليتم التمويج (40px 35px)

.mouseout(function(){
	$(this).stop().animate({backgroundPosition:"(40px 35px)"}, {duration:500, })
})

الآن الحدثين جاهزين للعمل ، بقي فقط ندخلهما تحت الرابط المراد التطبيق عليه :

$(function(){
$('#a a')
	.mouseover(function(){
		$(this).stop().animate({backgroundPosition:"(-20px 94px)"}, {duration:500})
	})
	.mouseout(function(){
		$(this).stop().animate({backgroundPosition:"(40px 35px)"}, {duration:500, })
	})
});

وهكذا أكون قد طبقت تحريكا للخلفية و تم تمويه الزائر أنه هناك حركة مثل فلاشية ، و لا وجود للفلاش داخل قائمتي

ملاحظات :

• عادة ما يكون لي في مشاريعي أكثر من قائمة ، و قد لا اريد تطبيق الحركة إلا على قائمة واحدة ، او كل قائمة لها حركتها المعينة ، لذلك يمكنني أن أجعل الخلفية الافتراضية لكل قائمة و تغييرها داخل كود js بتطبيق اوامر css داخل كود jQuery كالتالي :

  .css( {backgroundPosition: "-20px 35px"} )

  وهكذا فلن أقع في خلط ما دمت اعي ما أفعل

• لا يتوقف عمل هذه الحركات فقط على القوائم ، و إنما يمكنني تطبيقها على فقرات و عناصر أخرى من الصفحة ، يمكنك تجربة ذلك و ستكون نفس النتيجة إن شاء الله
• خدعتك تتوقف على شكل الصورة التي ستصممها اولا

آمل ان تكون استفدت مما قدمته اليوم ، على أمل الاتقاء في درس جديد و فكرة جديدة إن شاء الله تعالى ، و السلام عليكم ورحمة الله

مثال : Demo

لرؤية المثال اضغط هنا ، و حاول أن تضغط على كلمة أركان الإسلام .

الشرح

أضع كود x/html الخاص بي و هو سهل إن شاء الله

<div id="all">
	<div id="center"><a href="#">أركان الإسلام</a></div>
	<div id="autre">
		<div id="a"><a href="#">الشهادتان</a></div>
		<div id="z"><a href="#">الصلاة</a></div>
		<div id="e"><a href="#">الصيام</a></div>
		<div id="r"><a href="#">الزكاة</a></div>
		<div id="t"><a href="#">الحج</a></div>
	</div>
</div>

• عملت div كبرى اعطيتها id=all ، هذه للتنسيق فقط
• الـ div التي اعطيتها id=center هذه هي التي سأوسطها و أجعلها ظاهرة ، يعني هي العنوان الأصلي
• الـ div التي اعطيتها id=autre هذه الخاصة بباقي العناصر التي سأخفيها ، لكن بواسطتها عناصر كثيرة ، كلها سيتم إخفاؤها بالأثير ، لكن في حالتي هذه لم استعمل بالداخل قائمة ul أو form أو غيرها ، لأن فكرتي تنبني على تنسيق مظهر لأركان الإسلام ، سمكنك استعمال ما أردت في مشاريعك ن فهذا فقط مثال

و الآن آتي لتنسيقات css :

#all {
	width: 500px;
	height: 430px;
	margin: 50px auto;
	border:1px solid #ddd;	
	background: transparent url('2.png') no-repeat center center;
 
}
#center {
	margin: 0 auto;
	width: 50px;
	text-align: center;
	position: relative;
	top: 48%;
}
#autre {
	background: transparent url('1.png') no-repeat center center;
	width: 359px;
	height: 343px;
	margin: 20px auto;
}
 
/* هنا تنسيقات لكلمات أركان الإسلام ، كل واحدة على حدى */
#autre #a {
	position: relative;
	top: 57px;
	right: 80px ;
	width: 50px;
}
#autre #z {
	position: relative;
	right: 230px ;
	top: 35px;
	width: 50px;
}
#autre #e {
	position: relative;
	top: 145px;
	right: 55px ;
	width: 50px;
}
#autre #r {
	position: relative;
	top: 120px;
	right: 270px ;
	width: 50px;
}
#autre #t {
	position: relative;
	top: 175px;
	right: 165px ;
	width: 50px;
}

أظنه كود عادي جدا و مفهوم ، حاولنا فيه ان نجعل العنوان الأصل – أركان الإسلام في الوسط- و نوزع حولة الأركان و نفرقها بطريقة معينة و اعطيناها جمالية معينة

الآن كل شيء جيد ، لكن الأركان تحتاج ان اخفيها ، و عند الضغط على العنوان الأصلي ، يتم استدعاؤها و اظهارها .. ( نوع من الحركية في الصفحة )
هنا سنستعمل لغة javascript كما هو معلوم ،
بعد استدعائنا لملف مكتبة jQuery في وسم head نضع كودنا الخاص بنا :

// هذه اضافة fadeToggle في المكتبة
jQuery.fn.fadeToggle = function(s, fn){
	return (this.is(":visible"))
	? this.fadeOut(s, fn)
	 : this.fadeIn(s, fn);
};
 
$(document).ready(function(){
 $("#autre").hide();
  $("#center").click(function () {
   $("#autre").fadeToggle(5000);
   });
});

و الآن تابع معي :

 $("#autre").hide();

اخفينا هنا الـ div الخاص بالأركان كاملة وهو ما اعطيناه id=autre بحيث ان hide هي قيمته الافتراضية ،

$("#center").click(function () {
  $("#autre").fadeToggle(5000);
});

هنا نحدد حالة ظهوره ، وهي عند تحقيق الحدث click على الـ div الذي اعطيناه id=center ( يعني عند الضغط على كلمة أركان الإسلام ) هنا اعمل لي fadeToggle على الـ div الذي اعطيته id=autre ( وهو كلمات الأركان الأخرى ) ، بقيمة 5000 ، وهي قيمة الظهور ، االسرعة أو البطأ .. كلما زاد العدد إلا و بطأت الحركة ، و الهعكس بالعكس

يمكنك تجربة الحركة في أفكار أخرى ، و بسرعات مختلفة ، فلكل منا أفكاره الخاصة به ،

ملاحظة

إذا أردت ان تجعل شرط الظهور و الغخفاء ليس الضغط ، و إنما فقط تمرير المأشر على الأصل ، استبدل الحدث click بـ hover

$("#center").hover(function () {
 $("#autre").fadeToggle(5000);
});

التحميل : Download

لتحميل التطبيق كاملا تفضل من هنا .

أرجو أن تكون قد استفدت من الطريقة فلها عدة اسعمالات و يكفي أن نفهم الأصل الذي يبنى عليه كل شيء ، و السلام عليكم ورحمة الله

Demo
رؤية مثال : من هنا

اولا لنأخذ قائمة العناوين ، كود x/html الخاص بها :

<ul class="menu">
	<li><a title="للرجوع للرئيسية اضغط هنا" href="http://www.fez-soft.net">الرئيسية</a></li>
	<li><a title="نرحب بأي اتصال ، أو نقد أو نصيحة أو دعم" href="http://www.fez-soft.net/contact">اتصل بنا</a></li>
	<li><a title="أخوكم محمد شاطر" href="http://www.fez-soft.net/about-me">Fez-Soft</a></li>
</ul>

شيء عادي جدا ، الآن سنحاول أن نعمل تنسيق قائمتنا و نجعلها أفقية ،
كود css : لنحاول الآن أن نموضع div القائمة

.menu2 {
	margin: 100px 0 0;
	padding: 0;
	list-style: none;/* لنزع النقط السوداء التابعة للقوائم */
}
.menu li {
	padding: 0;
	margin: 0 2px;
	float: right; /* لجعل القائمة أفقية و ليست عمودية */
	position: relative;
	text-align: center;
}
.menu a {
	padding: 14px 10px;
	display: block; /* ليملأ الرابط كل مكان Li و لا يكتفي بمكان الرابط فقط */
	color: #000000;
	width: 144px;
	text-decoration: none;
	background: url(images/button.gif) no-repeat center center;
}
.menu li em { /* هذا تنسيق الوصف الذي سنظره و نخفيه بتاثير المكتبة */
	background: url(images/hover.png) no-repeat;
	width: 180px;
	height: 45px;
	position: absolute;
	top: -85px;
	right: -15px;
	text-align: center;
	padding: 20px 12px 10px;
	font-style: normal;
	z-index: 2;
	display: none; /* القيمة الافتراضية له أن يكون مخفيا */
}

أرجو أن تقرأ التعليقات بالعربية لأنها تفسر الخصائص المبهمة ،
و الآن قائمتنا جيدة من ناحية التنسيق ، ينقصها تاثير المكتبة على الوصف ليزيدها جمالا ، لنستدعي ملف المكتية في وسم الهيد كما تعودنا :

<script src="jquery.js" type="text/javascript"></script>

ونقوم بعمل التأثير الآن ، لا زلنا في وسم الهيد :

$(document).ready(function(){
 
	$(".menu2 a").append("<em></em>");
 
	$(".menu2 a").hover(function() {
		$(this).find("em").animate({opacity: "show", top: "-75"}, "fast");
		var hoverText = $(this).attr("title");
	    $(this).find("em").text(hoverText);
	}, function() {
		$(this).find("em").animate({opacity: "hide", top: "-85"}, "slow");
	});
 
});

لاحظ معي :

$(".menu2 a").append("<em></em>");

اعطينا القائمة قيمة em ، و لكننا تركناها مخفية – راجع ملف css حيث كتبنا قيمة menu li em التالي :

display: none;

لاحظ :

$(this).find("em").animate({opacity: "show", top: "-75"}, "fast");

• show:قيمة opacity ليتم اظهار العنصر
• fast : سرعة الظهور ، هنا سريعة

و عند الاخفاء نعمل العكس :

• hide : نعطيها لقيمة opacity ليتم اخفاء العنصر
• slow : الاخفاء سيتم ببطأ

التحميل : Download
لتحميل القائمة بالكامل و الصور كذلك : تفضل من هنا

و السلام عليكم ورحمة الله وبركاته .

ما شاء الله تبارك الله

حاول أن تمرر الماوس على العناصر التي فوق .
كما ترى ، يمكن تطبيق الحركة على صورة ، نصوص ، حتى الأزرار و الفورم ، و اي شيء تريده أن يظهر بشكل ضبابي ..

اول شيء نعطي للشيء الذي نريده أن يظهر بشكل ضبابي كلاس :

class="gradualfader"

و نستدع ملف الجافا سكربت في وسم head

<script src="js.js" type="text/javascript"></script>

انا سميته كمثال js .. نزرع في هذا الملف التالي :

 
var gradualFader={}
 
gradualFader.baseopacity=0.4 //set base opacity when mouse isn't over element (decimal below 1)
gradualFader.increment=0.2 //amount of opacity to increase after each iteration (suggestion: 0.1 or 0.2)
 
document.write('<style type="text/css">\n') //write out CSS to enable opacity on "gradualfader" class
document.write('.gradualfader{filter:progid:DXImageTransform.Microsoft.alpha(opacity='+gradualFader.baseopacity*100+'); -moz-opacity:'+gradualFader.baseopacity+'; opacity:'+gradualFader.baseopacity+';}\n')
document.write('</style>')
 
gradualFader.setopacity=function(obj, value){ //Sets the opacity of targetobject based on the passed in value setting (0 to 1 and in between)
	var targetobject=obj
	if (targetobject && targetobject.filters && targetobject.filters[0]){ //IE syntax
		if (typeof targetobject.filters[0].opacity=="number") //IE6
			targetobject.filters[0].opacity=value*100
		else //IE 5.5
			targetobject.style.filter="alpha(opacity="+value*100+")"
		}
	else if (targetobject && typeof targetobject.style.MozOpacity!="undefined") //Old Mozilla syntax
		targetobject.style.MozOpacity=value
	else if (targetobject && typeof targetobject.style.opacity!="undefined") //Standard opacity syntax
		targetobject.style.opacity=value
	targetobject.currentopacity=value
}
 
gradualFader.fadeupdown=function(obj, direction){
	var targetobject=obj
	var fadeamount=(direction=="fadeup")? this.increment : -this.increment
	if (targetobject && (direction=="fadeup" && targetobject.currentopacity&lt;1 || direction=="fadedown" && targetobject.currentopacity>this.baseopacity)){
		this.setopacity(obj, targetobject.currentopacity+fadeamount)
		window["opacityfader"+obj._fadeorder]=setTimeout(function(){gradualFader.fadeupdown(obj, direction)}, 50)
	}
}
 
gradualFader.clearTimer=function(obj){
if (typeof window["opacityfader"+obj._fadeorder]!="undefined")
	clearTimeout(window["opacityfader"+obj._fadeorder])
}
 
gradualFader.isContained=function(m, e){
	var e=window.event || e
	var c=e.relatedTarget || ((e.type=="mouseover")? e.fromElement : e.toElement)
	while (c && c!=m)try {c=c.parentNode} catch(e){c=m}
	if (c==m)
		return true
	else
		return false
}
 
gradualFader.fadeinterface=function(obj, e, direction){
	if (!this.isContained(obj, e)){
		gradualFader.clearTimer(obj)
		gradualFader.fadeupdown(obj, direction)
	}
}
 
gradualFader.collectElementbyClass=function(classname){ //Returns an array containing DIVs with specified classname
	var classnameRE=new RegExp("(^|\\s+)"+classname+"($|\\s+)", "i") //regular expression to screen for classname within element
	var pieces=[]
	var alltags=document.all? document.all : document.getElementsByTagName("*")
	for (var i=0; i<alltags .length; i++){
		if (typeof alltags[i].className=="string" && alltags[i].className.search(classnameRE)!=-1)
			pieces[pieces.length]=alltags[i]
	}
	return pieces
}
 
gradualFader.init=function(){
	var targetobjects=this.collectElementbyClass("gradualfader")
	for (var i=0; i<targetobjects.length; i++){
		targetobjects[i]._fadeorder=i
		this.setopacity(targetobjects[i], this.baseopacity)
		targetobjects[i].onmouseover=function(e){gradualFader.fadeinterface(this, e, "fadeup")}
		targetobjects[i].onmouseout=function(e){gradualFader.fadeinterface(this, e, "fadedown")}
	}
}

إلى الآن فالعنصر الذي ادخلنا عليه الكلاس الذي ذكرت في الأول ، سيظهر مضبب ، لكن لنجعله يظهر عند مرور الماوس عليه .. نفعل الدالة قبل ما نغلق وسمbody

<script type="text/javascript">
gradualFader.init() //activate gradual fader
</script>

الآن انتهينا من كل شيء ،
أمثلة جاهزة :
صورة :

<img class="gradualfader" src="demo/1.png" alt="" />

نص :

<p class="gradualfader">
هنا نصك
</p>

زر :

<input class="gradualfader" type="submit" value="submit" />

ملاحظة ، لو أردت ان ادخل تنسيق css خاص بي على ال div أو الصورة او اي شيء يمكنني أن أجعل له id خاص به مثل :

<div class="gradualfader" id="header"></div>

لو كان عندي كلاس ، اشركه مع القديم هكذا :

<div class="gradualfader header" ></div>

باعتبار header هو كلاس التنسيق

أتمنى أن يكون كل شيء واضح
و السلام عليكم ورحمة الله
انشر هذا المقال

]]> http://fez-soft.net/archives/54/feed 9