بسم الله الرحمن الرحيم ،
دائما ما نفكر في راحة زوار مواقعنا ، من خلال اعطاء تصاميمنا رونقا خاصا الخ ..
و ان تجعل لموقعك اكثر من شكل سيجعل زوارك اكثر اقبالا على موقعك .
لـــن اطيل عليكــم ، ففكرة اليوم هي ان تجعل للصفحة اكثر من شكل و ذلك بعمل كل تنسيق Css في ملف على حدى و وضع قائمة في مكان من الصفحة ليتمكن الزائر من الاختيار بين الاشكال ، مع مساعدة بسيطة من Js .

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

مثال على الفكره : تفضل من هنا

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


عندي في المثال 3 أشكال ، الرمادي فيها هو الافتراضي ، و الأزرق و الأسود ثانويين ، إذن لابد من عمل ملف افتراضي و ملفين ثانويين ، تابع :media="screen" title="noir" href="2.css" />
كود PHP:
     
     
<link rel="stylesheet" type="text/css" href="style.css" />
<
link rel="stylesheet" type="text/css" href="default.css" />
<
link rel="alternate stylesheet" type="text/css" media="screen" title="bleu" href="1.css" />
<
link rel="alternate stylesheet" type="text/css" 
الملف style به تنسيقات ستظهر في جميع التصاميم ، اما default.css فهذا خاص بالتنسيقات الخاصة بالشكل الافتراضي ولكنها ستتغير في التصاميم الأخرى
الملفين 1.css و 2.css خاصين بالأشكال الفرعية .
لاحظ انني عملت في الملفات الافتراضية rel=”stylesheet” و في الفرعية rel=”alternate stylesheet” ، أضفت alternate وهي تعني مناوب ، يعني عند استدعائه سينوب عن الافتراضي
لا تنس أنني اعطيت لكل ملف title خاص به ، تذكره جيدا ، لأنك ستسعمله كمتغير .
ستحتاج كذلك ملف التطبيق الخاص ، يتم استدعاؤه كما العادة في وسم head


كود PHP:
<script src="js/styleswitch.js" type="text/javascript"></script> 
يمكنك تحميل ملف js من هنا
الآن لم يبق سوى طرق عرض الاختيارت :

  • قائمة عناوين من نوع radio

    كود PHP:
    <form id="switchform">
        <
    input type="radio" name="choice" value="none" onclick="chooseStyle(this.value, 60)" />الافتراضي<br />
        <
    input type="radio" name="choice" value="bleu" onclick="chooseStyle(this.value, 60)" />الأزرق<br />
        <
    input type="radio" name="choice" value="noir" onclick="chooseStyle(this.value, 60)" />الأسود
    </form
    فورم عادي به خيارات من نوع radio لكن اعطيتها متغير choise ، و عند الضغط لتغيير اخيار سنعمل على الدالة chooseStyle() ندخل عليها اسم الاستايل و وهو الذي أشرنا اليه في الهيد بـ title ، و كذلك الوقت الذي سيبقى هذا الاستايل في جهاز هذا الزائر ، ما لم يتم مسح الكوكيز ، بالأيام ، 60 يوم .
  • روابط عادية بها أسماء الخيارات :



كود PHP:
<a href="javascript:chooseStyle('none', 60)">الافتراضي</a><br />
<
a href="javascript:chooseStyle('bleu', 60)">الأزرق</a><br />
<
a href="javascript:chooseStyle('noir', 60)">الأسود</a
  • نفس العمل ، على نفس الدالة ولكن على روابط عادية
  • صور تدل على نوع الاستايل :
    و هي مثل طريقة الروابط اعلاه



كود PHP:
<a href="javascript:chooseStyle('none', 60)" ><img src="images/8.png" alt="الافتراضي" /></a>    
<
a href="javascript:chooseStyle('bleu', 60)"><img src="images/9.png" alt="الأزرق" /></a>     
<
a href="javascript:chooseStyle('noir', 60)"><img src="images/7.png" alt="الأسود" /></a
  • و أدخلت تأثير على الصور بالتالي :
    كود PHP:
         a img {
        
    border1px solid transparent;
    }
    a img:hover {
        
    border1px solid #bbb;

    لكن لم border: 1px solid transparent; و ليس borde:none;
    حتى لا أحصل على تحرك للصور عند تمرير المؤشر عليها ، لتنتقل من border = 0 الى border = 1
  • خيارات option في قائمة select

    كود PHP:
    <form id="switchform">
        <
    select name="switchcontrol" size="1" onchange="chooseStyle(this.options[this.selectedIndex].value, 60)">
        <
    option value="none" selected="selected">الافتراضي</option>
        <
    option value="bleu">الأزرق</option>
        <
    option value="noir">الأسود</option>
        </
    select>
    </
    form
    هنا تتغير طريقة استعمال الدالة الى طريقة ديناميكية ، بحيث نشترط عليه كلما تم التغيير في اختيار العنوان في القائمة ، أن يأخذ الـ value منها و يدخلها مكان title في الدالة ، و هي ما قصدناه بـ this.options[this.selectedIndex].value

الــــى هنا اتمنى ان الدرس نال اعجابكم