+ + + + +
Share/Save/Bookmark

2009-08-23

خلفيات متغيرة




ما رايك لو مع كل ضغطة refresh بالفارة تتغير خلفية مدونتك لتعطى شكلا جديدا بشكل متكرر ومع كل ضغطة يضغطها الزائر تتحول المدونة لشكل جديد بدون ان تتدخل انت , اليس هذا امرا ممتعا ؟

فى هذا الموضوع ستتعلم كيفية وضع خلفيات متعددة " صور " للمدونة , ومع كل "تحديث refresh " للصفحة تتغير تلك الصورة بصورة اخرى , لذلك يجب عليك انشاء تلك الصور ثم رفعها على موقع رفع صور مثلا imageshack مثلا , وبعد الانتهاء من كل هذا , نفذ الخطوات التالية :

لنفرض ان لدينا 10 خلفيات نريدها ان تتغير بشكل تلقائى عن كل ضغطة , الان ان تملك 10 روابط لتلك الصور , حسنا :

1- انشاء قطعة جديدة من نوع هتمل جافا سكريب html/java script من صفحة العناصر
ثم الصق بها هذا الكود :


<script type="text/javascript">
var banner= new Array()
banner[0]="الرابط الاول"
banner[1]="الرابط الثانى"
banner[2]="الرابط الثالث"
banner[3]="الرابط الرابع"
banner[4]="الرابط الخامس"
banner[5]="الرابط السادس"
banner[6]="الرابط السابع"
banner[7]="الرابط الثامن"
banner[8]="الرابط التاسع"
banner[9]="الرابط العاشر"
var random=Math.floor(10*Math.random());
document.write("<style>");
document.write("#header {");
document.write(' background:url("' + banner[random] + '") no-repeat top left;');
document.write(" }");
document.write("</style>");
</script>



هذا الجافا سكريبت يعمل على تغيير الـ background للـ body بشكل تلقائى , اتبع الخطوات الاتية :

- ضع روابط الصور مكان الجمل باللغة العربية بين علامات التنصيص بالتريب , لا تحذف علامات التنصيص

- لاحظ الكلمات الملونة لها اهمية فقط فى تموضع الصورة داخل منطقة الراس , وليس لها علاقة بمسالة تغيير الصورة :
- no-repeat معناها ان الصورة لن تتكرر افقيا او راسيا , ليس للامر علاقة بالتكرار بين الصور وبعضها .
- top تعنى ان الصورة ستتموضع فى الجانب العلوى من منطقة الراس
- left تعنى ان الصورة ستتموضع فى الجانب الايسر من منطقة الراس

يمكنك تعديل تلك القيم اذا كانت هناك ضرورة , مثلا ممكن ان تضع center center بدلا من top left اذا كنت تريد للصورة ان تتموضع فى وسط المدونة , ويمنك ايضا ان تجعلها repeat-x او repeat-y بدلا من no-repeat كى تتكرر الصورة افقيا x او راسيا y , اما لو اردتها ان تكرر افقيا وراسيا معا فيجب حذف no-repeat وعدم وضع شئ مكانها , والمتصفح سيكررها بشكل افتراضى .

- الرقم 10 باللون البنفسجى يدل على عدد الصور , اذا كان لديك عدد صور اقل او اكثر , احذف الروابط بالاعلى او كررها , ثم غير الرقم 10 بالرقم المناسب


2- بعد لصق الكود فى القطعة , احفظ وجرب :)





الصق لوجو المدونة عندك

اشكال بديلة اخرى من هـنـا

7 اضف تعليق , التعليقات:

simply me said...

سلام عليكم
انا عملت حكايه الخلفيات المتغيره دى
بس الصوره تطلع فقط عند عنوان المدونه

ياترى هى كده صح ولا فى حاجه غلط؟

Wael said...

Bondoka
********

وعليكم السلام ورحمة الله
انا دخلت مدونك ولقيت فيها صورة واحدة بس

فمش عارف ايه الخطوات الى فمت/قمتى بيها بالظبط عشان اقدر اعرف المشكلة فين وهل ركبتى الكود ولا لأ
المفروض اصلا فيه اكتر من صورة

Zyia said...

اخي الكريم.. وين الصقها بالضبط؟؟

Wael said...

عبد الله

الصقها فى اداة من نوع html/java script هتمل جافاسكريبت

الملكة نفرتيتى said...

شكرا على الشرح المميز
جزاك الله خيرا
قمت بعمل الخطوات وللأسف لم يتغير شىء

اية said...

شكرا على الشرح المميز
جزاك الله خيرا
'طبقت الخطوات ولم يجدث شيء

M . Elgemezy said...

شكرااا
ولاكن لم يتغير شيئ
انظر ماذا حدث للقالب
http://abda3design.blogspot.com

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Post a Comment

اضف تعليقك هنا

اضغط على عنوان البوست لتظهر التعليقات