[ كود ] : ₪ كـود بنـرات المواضيع الممـيزة والحصـرية بتأثير css hover ₪
تم تحديث الموضوع يوم الإثنين الساعة ( 1 ليلاً )
يرجى إعدة تركيب الأكواد
كود
بتقنية css
وتأثير hover ينفع لفعاليات المنتدى والمواضيع المميزة والحصرية .
الكود عبارة عن
6 بنرات قابلة لزيادة, البنرات عليها تأثير يجعلها
مظللة وبمجرد مرور الماوس توضح.
الإعداد الأول للكود كان بواسطة الأخ : Solar Attack .
وتم التعديل عليه من قبل الأخ : -==Zero==- , ليتوافق مع جميع المتصفحات .
ترتيب الكود تم بواسطتي : ساعة زمن .
لمشاهدة مثال على الكود : "
الكود في مربع الملاحظات "
https://www.sa3atzaman.com/vb
طريقة التركيب كأي كود فقط عدل الكود بما يناسبك بعد ذلك قم بإضافته بالمكان المناسب, من رأيي الملاحظات مكان مناسب جداً.
وراح اوضح لكم طريقة التركيب :
1- قم بإضافة الكود التالي في (تعاريف CSS الإضافية/Additional CSS Definitions)
ملاحظة: عدل روابط الصور بما يناسبك, كذلك المقاسات .
كود PHP:
/* ***** الفعاليات ***** */
#solar-img {
background:url('https://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('https://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('https://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('https://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('https://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('https://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;}
2- أضف الكلاسات التالية في المكان المراد ظهور الصور فيه :
ملاحظة: قم بتعديل وصف الصورة ورابطها بما يناسبك.
كود PHP:
?{.
ـالْمَوَآضِيْع ـالْمُمَيِّزَة وَـالحَصَرِيّة .}?
أتمنى عدم إزالة الحقوق
-----------------------------------------
مواضيع متعلقة بتقنية css :
تـغيير شكـل الـوقت ولـونه بطريقـة مختلفـة ومميزة css √
https://www.rawabetvb.com/vb/showthread.php?t=228512