ط§ظ„طµظˆط±ط© ط§ظ„ط´ظپط§ظپط© 2 (ظگ Css )


السلام عليكم
شفنا في درس مفصل سابق طريقة عمل صور شفافة
بالجافا سكريت
رابط الموضوع :

درس مفصل بسيط : الصورة الشفافة ( j a v a s c r i p t )










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












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






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





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

 رمز Code:



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











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


 رمز PHP:
<code style="white-space:nowrap"> <code> &#91;LEFT&#93;.flykitopacity:hover img&#91;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
&#93;
&#91;/LEFT&#93;
&#91;CENTER&#93;&#91;/CENTER&#93;
</code> </code>




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






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








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

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

التي سنضيف لها الكلاس الذي هو flykitopacity
بحيث درجة الشفافية هي 40

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

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







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

ثم





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









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












لمشاهدة نتيجة الدرس مفصل :
Clique Here










في انتظار تطبيقاتكم

و الى اللقاء في موضوع اخر

الموضوع الأصلي
http://www.flyarb.com/f.asp?t=33376









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