رمز Code:
كود code: .zebarh{float:right;position:relative;display:bloc k;width:89px;height:44px;background:url(images/zebarh.jpg) no-repeat; cursor
ointer;background-position:top;} .zebarh span.hover{float:right;position:absolute;display:b lock;width:89px;height:44px;background:url(images/zebarh.jpg) no-repeat; cursor
ointer;background-position:bottom;}
ملاحظة : سوف يتم شرح طريقة جميع الأكواد في نهاية الموضوع
واعمل حفظ
انتهينا من تركيب install الاكواد و الاضافات
الان شرح طريقة الأكواد
أول كود code ضفناه في أول هيدر وهو
رمز Code:
<a class="zebarh" href="#"></a>
مثلاً تريد تضيف شعار مثل المثال في أعلى الموضوع
أو صورة معينة
فنعمل
رمز Code:
<a class="
xxx" href="
ooo"></a>
xxx = الاي دي فسميها كما تحب مثلا لو تريد شعار فنسميها logo
ooo = الرابط وهذا معروف
ونحن سميناها zebarh
والكود code الثاني اللذي ضفناها في أسفل الهيدر header وهي اننا عملنا اضافة لملفات الجيكوري ( سكريبت script )
وملفات التاثير موجودة في رابط التحميل الذي وضعناها في أعلى الموضوع
كود code:
<script type="text/javascript" src="
jquery-1.3.2.min.js"></script> <script type="text/javascript" src="
menus.js"></script>
واتينا الى اخر كود code وهي كود code الـ جي اس اس وهي الأهم في هذا الشرح طريقة
[CODE]
رمز Code:
.zebarh{float:right;position:relative;display:bloc k;width:89px;height:44px;background:url(images/zebarh.jpg) no-repeat; cursor
ointer;background-position:top;} .zebarh span.hover{float:right;position:absolute;display:b lock;width:89px;height:44px;background:url(images/zebarh.jpg) no-repeat; cursor
ointer;background-position:bottom;}[/CODE
أولاً يجب تعديل رابط الصورة الى شعارك الخاص مثل المثال الموجود في الأعلى
ويمكنك تعديل الشعار من خلال تغير هذا الرابط الى رابط المكان الموجود فيه الشعار
مؤشر بالأحمر
[CODE] رمز Code:
.zebarh{float:right;position:relative;display:bloc k;width:89px;height:44px;background:url(
images/zebarh.jpg) no-repeat; cursor
ointer;background-position:top;} .zebarh span.hover{float:right;position:absolute;display:b lock;width:89px;height:44px;background:url(
images/zebarh.jpg) no-repeat; cursor
ointer;background-position:bottom;}[/CODE
لو تريد تعمل نفس حركة المثال الموجود في الأعلى وهو انك تعمل شرح طريقة هذا الموضوع على شعار منتداك
فلازم تصمم شعار بهذا الشكل
يعني تصمم شعارك و تعمل نسخة منها وتحطها للاسفل وتحط فيها التاثير للتغير اليها اثناء مرور مؤشر الماوس عليها
وبعد الانتهاء من تصميم الشعار احفظها وارفعها الى مجلد استايل styleك أو مجلد صور المنتدى forum
وطبعاً مع مراعاة تغيير رابط الصورة
بعد تصميم الصورة و تعديل رابطها
يجب ان نضع مقاس الشعار الأعلى لوحده
ونضعها في مكان المؤشر بالأحمر
[CODE]
رمز Code:
.zebarh{float:right;position:relative;display:bloc k;width:
89px;height:
44px;background:url(images/zebarh.jpg) no-repeat; cursor
ointer;background-position:top;} .zebarh span.hover{float:right;position:absolute;display:b lock;width:
89px;height:
44px;background:url(images/zebarh.jpg) no-repeat; cursor
ointer;background-position:bottom;}[/CODE
الأن انتهينا من الشعار و ضبط الكود code و المقاس ..الخ
واذا تريد ان تتحكم بمكان الشعار بنسبة بكسولية
فيجب عليك اضافة كود code الى كود code التاثير الجي اس اس التالي لتصبح هكذا
رمز Code:
.zebarh{float:right;position:relative;display:bloc k;width:89px;height:44px;background:url(images/zebarh.jpg) no-repeat; cursor
ointer;background-position:top;
top:11px;left:11px;} .zebarh span.hover{float:right;position:absolute;display:b lock;width:89px;height:44px;background:url(images/zebarh.jpg) no-repeat; cursor
ointer;background-position:bottom;};}
top = يعني انه ينزل من فوق الهيدر header كم بكسل ؟ وتقدر تغيرها بتغير قيمة 11
left = يعني يجي من اليسار كم بكسل
لو تريد يكون جاي من اليمين فعليك بتغير left الى right
وتتحكم بقيمتها وهي 11
الان انتهينا من الشرح طريقة تقريباً
وباقي شيء واحد وهي
انه لو انت غيرت اسم الديف المؤشر بالأحمر
كود code:
رمز Code:
<a class="
zebarh" href="#"></a> الى اي اسم مثلا logo او image او hdr اي اسم اخر
فلازم تعدل على ملف الجيكوري المسمى بـ menus.js
ويوجد فيها مكان لتغير الديف وهذه صورة توضيحية
فقط عدل عليها باسم اللي سميتها الديف واعمل حفظ
ويمكنكم تطبيق هذا التاثير لصفحات الويب او المدونات سهلة جدا فقط عليكم بنسخ الاكواد ولصقها في المكان المناسب و رفع الملفات اللازمة
انتهينا الحمدلله تعالى من الشرح طريقة
وأتمنى انكم فهمتم الشرح طريقة و التاثير الجميل هذا .
وأي استفسارات أو اسئلة أو المشاكل الذي يواجهكم ان شاء الله تلقون الحل .
دمتم في حفظ الملك القدوس السلام ..
w w w . z e b a r h . c o m