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



باسم الله نفتح عمل جديد بأي محرر نصوص
انا سأستعمل الفرونت بيج

ثم نضع علامتي الستايل قبل انتهاء ال head
لنضع بينهما كود ال Css
هكذا

الأن نضيف الجزء الأول من الكود


كود PHP:
.flykitopacity imgfilter:progid:DXImageTransform.Microsoft.Alpha(opacity=40); ] 


شرحه: هنا عملنا كلاس للصور
و استخدمنا فيلتر يجعل الصورة شفافة بحيث العدد 40 هو درجة الشفافية .

ثم نضيف بعده الجزء الثاني من الكود



كود PHP:
                       [LEFT].flykitopacity:hover img[
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
]
[/
LEFT]
[
CENTER][/CENTER


و شرحه: لو لاحظتم هنا استخدمنا نفس الكلاس
و تقريبا عكسنا الجزء الأول من الكود بحيث استخدمنا القيمة
hover و تعني عند مرور الماوس على الصورة .
ثم في السطر الثاني استخدمنا نفس الفيلتر الأول
لكن غيرنا القيمة من 40 الى 100 .

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



اذن كما توضح الصورة الاختلاف بين الجزء الأول و الثاني من الكود

  • هو أن الجزء الأول يساوي الحالة الافتراضية للصورة

التي سنضيف لها الكلاس الذي هو flykitopacity

نقره لتكبير أو تصغير الصورة ونقرتين لعرض الصورة في صفحة مستقلة بحجمها الطبيعي

بحيث درجة الشفافية هي 40

  • اما الجزء الثاني يقول انه عند مرور الماوس على الصورة

التي تستخدم الكلاس flykitopacity
تكون درجة الشفافية 100 و بهذا ستعود الصورة لحالتها عند مرور الماوس .
لتحميل الكود :
Clique Here


الأن ننتقل لمنطقة ال body

ثم


  • مكان # نضع الرابط الذي ينتقل اليه المتصفح بعد الظغط على الصورة.
  • مكان myimage.gif نضع رابط الصورة .


الأن لنجعل الصورة شفافة ما علينا الا أن نضيف اليها الكلاس
الذي عملناه في كود ال Css أعلاه .
يعني نضيف class باسم flykitopacity