الأحد، يوليو 04، 2010

كود اختفاء الصورة عند تمرير الماوس عليها .

كود جافا سكربت يتم اضافته الى قالب مدونات بلوقر وظيفته .. عند تمرير الماوس على الصورة الموجودة في مواضيع المدونة تختفي بشكل جزئي ثم تعود الى ما كانت عليه .( الكود يعمل على جميع المتصفحات ) .


مثال كما هو في مدونتي .
طريقة اضافة الكود :


من لوح تحكم مدونتك انتقل إلى صفحة التخطيط ثم " تحرير HTML "
قبل إجراء أي تعديل احفظ نسخة احتياطية من القالب لاستعادتها عند الضرورة.
ثم ابحث عن :
</head>
و اضف هذا الكود فوقها مباشرة :
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$(".post img").fadeTo("slow", 1.0); // This sets the opacity of the thumbs to fade down to 30% when the page loads
$(".post img").hover(function(){
$(this).fadeTo("slow", 0.5); // This should set the opacity to 100% on hover
},function(){
$(this).fadeTo("slow", 1.0); // This should set the opacity back to 30% on mouseout
});
});
</script>
<script type='text/javascript'>
$(document).ready(function(){
$(".latest_img").fadeTo("slow", 1.0); // This sets the opacity of the thumbs to fade down to 30% when the page loads
$(".latest_img").hover(function(){
$(this).fadeTo("slow", 0.5); // This should set the opacity to 100% on hover
},function(){
$(this).fadeTo("slow", 1.0); // This should set the opacity back to 30% on mouseout
});
});
</script>
ثم اضغط حفظ .. انتهى .

هناك 16 تعليقًا:

  1. تسلم يا أحمد ,, ابداع ومن تميز لآخر بإذن الله

    مدونة باسم

    ردحذف
  2. انا اشكرك على الاضافة ولقد نجحت معي انا اشكرك من كل قلبي وعقبال ما تضع شرح اضافة عدد لآخر التويترات

    ردحذف
  3. رااائع اخي احمد وسيتم التجريب بس استفسار اخي هل الأضافة تأثر على سرعة المدونة وشكرا جزيلا.اخوك مهند ناصر

    ردحذف
  4. الاخ طارق الحمد لله لانها نجحت معك و جاري التحضير لاضافة آخر التويترات .
    الاخ مهند بامكانك تجربنها على مدونتي و التاكد من سرعة التصفح..بالنسبة لي لا اجد اي مشكلة على جميع المتصفحات و كذلك وجدتها مركبة على بعض المدونات ايضا تعمل بدون مشاكل .

    ردحذف
  5. إضافة ممتازة أخي أحمد و تأثير أنيق. حفظك الله و جزاك خير الجزاء.
    أسأل هل يمكن تطبيقها على بعض الصور دون غيرها عبر ربطها ب class أو id أو شيء من هذا لقبيل؟ لأني أجدها ممتازة لاستعمالها كتأثير hover على الأيقونات .
    تقبل تحيات أخيك محمد.

    ردحذف
  6. شرفتنا بوجودك في المدونة اخي محمد .
    بصراحة لم يتسنى لي تجربة الكود على مجموعة معينة من الصور و لكني اعتقد ان الكود اعلاه يمكن تخصيصه لغرض اخر عند تغير .post img الى ما نود تخصيص الكود له .

    ردحذف
  7. شكرا جزيلا اخي الكريم احمد تم تجريب الأداة والحمد تمت بنجاح شكرا جزيلا اخي اخوك مهند ناصر اخي الكريم تم ارسال رسالة عن طريق نموذج اتصل بنا اتمنا الرد في انتظارك

    ردحذف
  8. اضافة رائعة وممتازة أخي أحمد

    دائماً تتحفنا بالجديد

    بارك الله فيك

    ردحذف
  9. بارك الله فيك على الأضافة الرائعة مشكور ...
    ونتمنى منك متابعت البريد

    ردحذف
  10. اخي مجتبى تم الرد عليك و تلبية طلبك .

    ردحذف
  11. شكرا على الكود أخي ...و تم وضعه بمدونتي

    ردحذف
  12. شكرًا
    تم وضعة في المدونة
    جزاك الله خيرًا .

    ردحذف
  13. Thanks to the effort .. I wish you luck

    ردحذف
  14. الله معكم .. اتمنى عرض الجديد بأستمرار

    ردحذف