مطلوب كود css عندما يمر الماوس على الصوره تضىء او يتغير درجه وضوحها

[انجاز هوست]

السلام عليكم ورحمه الله وبركاته

كل عام وانتم بخير

مطلوب كود css عندما يمر الماوس على الصوره تضىء او يتغير درجه وضوحها :shy:

بإنتظار الخبراء

[ليوناردو دافينشي]

ضع هذا الكود بمنطقة Head

<SCRIPT language="JavaScript">
function makevisible(cur,which){
strength=(which==0)? 1 : 0.2
if (cur.style.MozOpacity)
cur.style.MozOpacity=strength
else if (cur.filters)
cur.filters.alpha.opacity=strength*100
}
</SCRIPT> 

وهذا بمنطقة body مع تغير عنوان الصورة

 
<img src="http://www.google.com/intl/en_ALL/images/logo.gif"  style="filter:alpha(opacity=20);-moz-opacity:0.2" onMouseover="makevisible(this,0)" onMouseout="makevisible(this,1)"> 

يمكنك اضافة الخاصية لأي صورة باضافة الكود التالي الى الصورة

style="filter:alpha(opacity=20);-moz-opacity:0.2" onMouseover="makevisible(this,0)" onMouseout="makevisible(this,1)" 

[محمد فؤاد]

السلام عليكم

هناك طريقة اخرى اعتقد انها اسهل من استخدام الجافا سكريبت .. عن طريق استخدام css فقط كتحديد درجة وضوح opacity منخفضة وعند المرور على الصورة تتغير باستخدام hover و تغير قيمة opacity ...

او استخدام نسختين من الصوره مختلفتي الوضوح و التبديل بينهما عن طريق hover في css

[ليوناردو دافينشي]

السلام عليكم

هناك طريقة اخرى اعتقد انها اسهل من استخدام الجافا سكريبت .. عن طريق استخدام css فقط كتحديد درجة وضوح opacity منخفضة وعند المرور على الصورة تتغير باستخدام hover و تغير قيمة opacity ...

او استخدام نسختين من الصوره مختلفتي الوضوح و التبديل بينهما عن طريق hover في css

صحيحـ!! أنا بستخدم الجافا سكربـت عشانـ بقدر اضيف خصائـص اكثر بـ الفانشن

[انجاز هوست]

تم التطبيق والحمد لله, شاكر لكم اخوانى

اخوكم / محمد

[SyrWorld]

السلام عليكم

تستطيع فعل ذلك عن طريق الـ Css :

ملف الاستايل

<style type="text/css">

.toggleopacity img{
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
-moz-opacity: 0.5;
}

.toggleopacity:hover img{
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
-moz-opacity: 1;
}

.toggleopacity img{
border: 1px solid #ccc;
}

.toggleborder:hover img{
border: 1px solid navy;
}

.toggleborder:hover{
color: red; /* Dummy definition to overcome IE bug */
}

</style>

الكود الخاص بالصورة التي تضيء عند مرور الماوس فوقها :

<a class="toggleopacity" href="في حال كنت تريد وضع رابط للصورة">
<img border="0" src="مسار الصورة" width="137" height="26" />
</a>

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

<a class="toggleborder" href="في حال كنت تريد وضع رابط للصورة">
<img border="0" src="مسار الصورة" width="163" height="57" />
</a>

- اذا كنت تريد عمل هذا في المنتدى كل ماعليك هو نسخ الـ Css وفي حقل تعاريف CSS الإضافية/Additional CSS Definitions اضف هذا الكود :

.toggleopacity img{
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
-moz-opacity: 0.5;
}

.toggleopacity:hover img{
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
-moz-opacity: 1;
}

.toggleopacity img{
border: 1px solid #ccc;
}

.toggleborder:hover img{
border: 1px solid navy;
}

.toggleborder:hover{
color: red; /* Dummy definition to overcome IE bug */
}

لاتنسى اضافة الكلاس الخاص بالاستايل لكل صورة تريد عمل هذه الاضافة لها .

تحياتي

المصدر : Dynamic Drive CSS Library- Highlight image hover effect (opacity or borderize)