يابو فارس ،، لا هنت ادخل شوي

[msn.com]

بسم الله الرحمن الرحيم

امسي عليكم بالخير

واتمنى من الاخ ابو فارس

صاحب موقع الثاري

انه يعلمنا هالطريقة في تصميم الجداول

http://www.abdulmalik.althari.com/cv

نلقى فوق مكتوب

• الرئيسية
• المدونة
• الاعمال
• الدروس
• السيرة الذاتية
• سجل الزوار

فنجدهم متأطرين بشكل جميل بالجدول
يعني كل ما تضغط على صفحة يتحول الزر وكأنه شامل الصفحة كلها << جربوا لفهم االمقصد

اتمنى من الاخ يعلمنا الطريقة

[Remano]

الجزء العلوي عبارة عن الفلاش
واستخدم الجافا للتأثير الانتقالي لباقي التصميم
انتظر رده ربما يفيدك بالأكواد
بالتوفيق ,,

[أبو فارس]

مرحبا أخوي msn.com

بالنسبة للطريقة ياطويل العمر لعمل كالقائمة العلوية من الموقع

هي كالتالي

اعمل لك تصميم وتكون كصوره مثل هذي الأجزاء

قبل مرور الماوس

بعد مرور الماوس

خلفية القسم المفعل


واجعلها كخلفية لكل زر او قسم مثلاً

<div>الرئيسية</div>

داخل الوسم div اكتب الخصائص التالية

class="off" onmouseover="this.className='on'" onmouseout="this.className='off'" onClick="javascript : MenuButtons('../index.php')"

أول شي أضفنا

class="off"

معناها أنه كلاس تقوم بجعل له خلفيه إفتراضية عن طريق الـ CSS كالتالي

div .off {
background-image: url('../images/B_e.gif');
color: #3A92D2;
text-align: center;
font-weight: bold; font-size: 12; font-family: Tahoma;
text-decoration: none
}

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

وبالنسبة لـ

onmouseover="this.className='on'

تعني انه عند مرور الماوس غير اسم الكلاس إلى on

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

div .on {
background-image: url('../images/B_e2.gif');
color: #000000;
text-align: center;
font-weight: bold; font-size: 12; font-family: Tahoma;
cursor: hand;
text-decoration: none
}

وبالنسبة لـ

onmouseout="this.className='off'

هذه يجب ان نضعها لأنها عند مرور الماوس وإبعادها يجب علينا أن نرجع اسم الكلاس لكي يرجع لحالته الطبيعيه إذا كان غير ممر عليه الفاره

أخيراً

onClick="javascript : MenuButtons('../index.php')

تعني عند الضغط على الـ div

أستدعي الدالة

MenuButtons

التي تحتوي على بكل بساطه الكود التالي

function MenuButtons(URL) {
window.open(URL,"_self");
}

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

ولاحظ اننا في الستايل الخاص بالـ on في الـ CSS اضفنا

cursor: hand;

ويعني عند مرور الماوس اجعل الفأرة على شكل يد ليصبح كأنه زر

الأن انت عملت الأزرار التي لا تحتوي على الصفحة نفسها كالتالي

<div class="off" onmouseover="this.className='on'" onmouseout="this.className='off'" onClick="javascript : MenuButtons('../index.php')">الرئيسية</div>

لكن الزر الذي يكون هو نفس الصفحة تجعل خلفيته بالصورة الأخيرة

خلفية القسم المفعل


كالتالي

<div>السيرة الذاتية</div>

ونعطيه الكلاس الخاص به

<div class="active">السيرة الذاتية</div>

والكلاس active يحتوي على الـ CSS التالية

div .active {
background-image: url('../images/B_active.gif');
color: #000000;
text-align: center;
font-weight: bold; font-size: 12; font-family: Tahoma;
text-decoration: none
}

هذا كل مافي الأمر أخي msn.com

ولأي إستفسارات أخرى انا في الخدمة

[msn.com]

الله يبارج بك اخوي ابو فارس

الصراحة شئ طيب

انا ماعندي خبرة بالاكواد

لكن راح احاول اني اطبق الي قلته

وان شاء الله تنجح معي الفكرة

[أبو فارس]

أخوي msn.com ماسوينا إلا الواجب

وفيه برنامج يسوي لك قوائم إحترافية جداً وبسهوله جداً يضيفها لك داخل صفحتك

وهو برنامج مشهور جداً أيضاً بين الجميع

اسمه Sothink DHTML

وتجد هنا أمثله حيه بإمكانك مشاهدتها على الصفحة
Sothink DHTML Menu Samples --- DHTML Menu, DHTML Drop Down Menu, JavaScript DHTML Menu,Sothink DHTML Menu

تقبل أطيب تحياتي

[msn.com]

ابو فارس

والله اني احببتك في الله

اشكرك جزيل الشكر اخوي

ماتقصر وبارك الله بك

[أبو فارس]

أحبك الله الذي أحببتني فيه أخوي msn.com

أسعدني ذالك وشكراً لك