₪ ظƒظ€ظˆط¯ ط¨ظ†ظ€ط±ط§طھ ط§ظ„ظ…ظˆط§ط¶ظٹط¹ ط§ظ„ظ…ظ…ظ€ظٹط²ط© ظˆط§ظ„ط*طµظ€ط±ظٹط© ط¨طھط£ط«ظٹط± css hover ₪


تم تحديث update الموضوع يوم الإثنين الساعة ( 1 ليلاً )
يرجى إعدة تركيب install الأكواد


كود code بتقنية css وتأثير hover ينفع لفعاليات المنتدى forum والمواضيع المميزة والحصرية .
الكود code عبارة عن 6 بنرات قابلة لزيادة, البنرات عليها تأثير يجعلها مظللة وبمجرد مرور الماوس توضح.

الإعداد الأول للكود code كان بواسطة الأخ : Solar Attack .
وتم التعديل عليه من قبل الأخ : -==Zero==- , ليتوافق مع جميع المتصفحات .
ترتيب الكود code تم بواسطتي : ساعة زمن .

لمشاهدة مثال على الكود code : " الكود code في مربع الملاحظات "

طريقة التركيب install كأي كود code فقط عدل الكود code بما يناسبك بعد ذلك قم بإضافته بالمكان المناسب, من رأيي الملاحظات مكان مناسب جداً.

وراح اوضح لكم طريقة التركيب install :

1- قم بإضافة الكود code التالي في (تعاريف CSS الإضافية/Additional CSS Definitions)
ملاحظة: عدل روابط الصور بما يناسبك كذلك المقاسات .

رمز PHP:
<code style="white-space:nowrap"> <code> /* ***** الفعاليات ***** */
#solar-img {
background:url('http://www.sa3atzaman.com/vb/images/New-Events/soon.gif') no-repeat;
height:148px; width:122px; filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;
}
#solar-img:hover{filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0;}

#solar-img2 {
background:url('http://www.sa3atzaman.com/vb/images/New-Events/soon.gif') no-repeat;
height:148px; width:122px; filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;
}
#solar-img2:hover{filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0;}

#solar-img3 {
background:url('http://www.sa3atzaman.com/vb/images/New-Events/soon.gif') no-repeat;
height:148px; width:122px; filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;
}
#solar-img3:hover{filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0;}

#solar-img4 {
background:url('http://www.sa3atzaman.com/vb/images/New-Events/soon.gif') no-repeat;
height:148px; width:122px; filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;
}
#solar-img4:hover{filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0;}

#solar-img5 {
background:url('http://www.sa3atzaman.com/vb/images/New-Events/soon.gif') no-repeat;



height:148px; width:122px; filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;
}
#solar-img5:hover{filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0;}

#solar-img6 {
background:url('http://www.sa3atzaman.com/vb/images/New-Events/soon.gif') no-repeat;
height:148px; width:122px; filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;
}
#solar-img6:hover{filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0;}
</code> </code>

2- ضف الكلاسات التالية في المكان المراد ظهور الصور فيه :
ملاحظة: قم بتعديل وصف الصورة ورابطها بما يناسبك.

رمز PHP:
<code style="white-space:nowrap"> <code> <!-- www.sa3atzaman.com/vb - ساعة زمن -->
<!-- كلاس الصور -->
<table width="100%" cellpadding="0" cellspacing="0" border="0" align="center">
</td><td>
<table class="tborder" cellpadding="$stylevar&#91;cellpadding&#93;" cellspacing="$stylevar&#91;cellspacing&#93;" border="0" width="100%" align="right">
<tr><td align="center">
<img border="0" src="http://www.sa3atzaman.com/vb/images/nec1.png" width="16" height="16"><a href="/vb"><font color="C26B68">?{.
ـالْمَوَآضِيْع ـالْمُمَيِّزَة وَـالحَصَرِيّة .}?</font></a><img border="0" src="http://www.sa3atzaman.com/vb/images/nec1.png" width="16" height="16"></td></tr>
</table>
</td></tr></table>
<div align="center">
<table border="0" width="58%" cellspacing="0" cellpadding="0">
<tr>
<td align="center"><a title="قريباً" href="رابط الموضوع"><div id="solar-img"></div></a></td>
<td align="center"><a title="قريباً" href="رابط الموضوع"><div id="solar-img2"></div></a></td>
<td align="center"><a title="قريباً" href="رابط الموضوع"><div id="solar-img3"></div></a></td>
<td align="center"><a title="قريباً" href="رابط الموضوع"><div id="solar-img4"></div></a></td>
<td align="center"><a title="قريباً" href="رابط الموضوع"><div id="solar-img5"></div></a></td>
<td align="center"><a title="قريباً" href="رابط الموضوع"><div id="solar-img6"></div></a></td>
</tr>
</table>
<!-- / كلاس الصور -->
<!-- / www.sa3atzaman.com/vb - ساعة زمن -->
</code> </code>





أتمنى عدم إزالة الحقوق

المصدر:
http://www.sa3atzaman.com/vb/thread13537.html

-----------------------------------------

مواضيع متعلقة بتقنية css :
تـغيير شكـل الـوقت ولـونه بطريقـة مختلفـة ومميزة css √
تـغيير شكـل الـوقت ولـونه بطريقـة مختلفـة ومميزة css √





التعديل الأخير كان بواسطة ساعة زمن; 04 - 04 - 2014 الساعة 01:00




©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى©