الموضوع: شرح كيفية عمل تأثير وضوح الصور بمرور الماوس عليها بسهولة تامة

شرح كيفية عمل تأثير وضوح الصور بمرور الماوس عليها بسهولة تامة

هذا الدرس يتم عمله بالجافا عن طريق وضع صورتين

واحدة مظلمة و اخرى فاتحة و لكن ال Css وفر علينا كتير الله يخليه لينا

نبذة عن الدرس

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

و عند المرور عليها تظهر واضحة 100% بسهولة تامة

مثال حى

http://www.almsmk.com/Dev/Css/Opacity.html

طريقة عمل الشرح

اولا تقوم بوضع هذا الاستايل فى وسم Head

كود PHP:

<style>
a.zero img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5; border: 0px solid;}

a.zero:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0; border: 0px solid;}
</style>
</head> 


الآن الاستايل اسمه zero

ثم تضع كلاس الاستايل فى اى كود خاص بك

هكذا

لاحظ الكلاس اسمه zero

كود:

<a class="zero" href="http://www.almsmk.com">

كود:

<img src="Zero.Gif" alt="Zero" /></a>

و بعده كود الصورة العادى و جرب بنفسك و شوف

شرح الكود

Opacity

و هى نسبة الشفايفة يمكنك تغيير الرقم كما تريد و جرب التاثيرات بنفسك

الاكواد الكثيرة هى لكل متصفح واحد لفايرفوكس و اكسبلورر و ما الى ذلك

اى شىء غير واضح اتمنى تقولولى

اذا لم تستطيع كتابة الكود افتح صفحة ال Html الموجودة فى المثال و اضغط كليك يمين

ثم View Source

وشوف محتوى الاكواد و جربها بنفسك

تمام الله ينور يا أستاذ اسامة
// شرح موفق و مفيد جدا //
ربي يجعل مقدار افادتكم .. مثقال في ميزان حسناتك ان شاء الله

الله عليك يا زعيم
شرح رائع و درس أروع
في إنتظار المزيد من هذه الدروس القيّمة
باركك الله ^_^

لاح رائع تسلم ايدك يا معلم

شرح جميل و موضوع رائع

مشكور يا غالي

لو تتابع الموضوع

هل يكون هذا التاثير على كل صور المنتدى؟

جميل اوى شكرا ليك

ممتاز تسلم !

مشكور يا Zero

بارك الله بك
لمساتك الرائع دائما تضئ وتلئلئ الانترنت
دام لنا نبض قلبك وابداعك وقلمك يارب
اتمنى بس لو كان الدرس فيديو كان احسن واسرع
لاني كسول في القراءة احب الشئ العملي ^_^
10/10
سملت يدك
تحيتي لك استاذي