[ درس ] تغيير الخلفية مع زيارة كل صفحة او كل رفرش

السلام عليكم

اكيد لاحظت بعض المواقع تتغير خلفيتها بمجرد انك تفتح اي صفحه او تسوي رفرش

اكيد تسال نفسك شلون هذه الطريقه

طبعا في طرق كثيرة, هذه طريقه سهله ياستخدام جافا بسيط




راح نستخدم في الدرس CSS و Java و HTML

نفتح ملف HTML ونضع فيه الكود التالي

رمز PHP:

<span style="color: #000000">DOCTYPE HTML>




Background Change on Page Reload

والحين بنضيف فنكشن جافا بسيط هو راح يكون المسؤول عن تغيير الصور

رمز PHP:

var totalCount = 8;
function ChangeDIVback() {
var num = Math.ceil( Math.random() * totalCount );
document.getElementById("background").style.backgroundImage='url(images/'+num+'.jpg)';
}

شرح الكود اللي فوق :
سوينا متغير اسمه totalCount خزنا قيمه 8 فيه (عدد الصور اللي راح نستخدمها للخلفيه)

سوينا فنكشن ChangeDIVback وعرفنا متغير يديد باسم num
واستخدمنا ceil & random من Math Lib الموجوده مع الجافا ومعظم اللغات
طبعا ناتج num بكون عدد, و هذه العدد هو اسم الصورة
والسطر الاخير هو عشان يغير خلفية ال DIV

احين خلصنا من الجافا

نرجع الى ملف ال HTML ونضيف الكود التالي عشان نشغل الفانكشن
رمز PHP:

ChangeDIVback();

طبعا احين الخطوة الاخيرة هي اضافة CSS
رمز PHP:

.background {
position:absolute;
top: 0px;
right: 0px;
width: 1600px;
height: 100%;
background-repeat: no-repeat;
}

طبعا انا سويت مثال جاهز وفيه الكود و الصور و كل شي
تقدرون تنزلون المثال من هني

الموضوع باللغة الانجليزية + المصدر

اي سؤال او استفسار حاضر

تحياتي لكم
بويوسف







أكثر...