كود اختفاء الصورة عند تمرير الماوس عليها .
كود جافا سكربت يتم اضافته الى قالب مدونات بلوقر وظيفته .. عند تمرير الماوس على الصورة الموجودة في مواضيع المدونة تختفي بشكل جزئي ثم تعود الى ما كانت عليه .( الكود يعمل على جميع المتصفحات ) .
مثال كما هو في مدونتي .
طريقة اضافة الكود :
من لوح تحكم مدونتك انتقل إلى صفحة التخطيط ثم " تحرير HTML "
قبل إجراء أي تعديل احفظ نسخة احتياطية من القالب لاستعادتها عند الضرورة.
ثم ابحث عن :
</head>
و اضف هذا الكود فوقها مباشرة :
مثال كما هو في مدونتي .
طريقة اضافة الكود :
من لوح تحكم مدونتك انتقل إلى صفحة التخطيط ثم " تحرير 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>
هذا الموضوع كتبته يوم الأحد، يوليو 04، 2010 ضمن تصنيف
اضافات بلوقر
فأن اصبت فمن الله وحده و ان اخطات فمن نفسي و الشيطان . يمكنك نقل اي موضوع من المدونة بشرط ذكر المصدر و ذكر رابط الموضوع الاصلي للاتصال او الاستفسار عن اي موضوع من
هنا.
13 تعليق على | كود اختفاء الصورة عند تمرير الماوس عليها . |
04 يوليو, 2010 12:21 ص
تسلم يا أحمد ,, ابداع ومن تميز لآخر بإذن الله
مدونة باسم
04 يوليو, 2010 02:22 م
انا اشكرك على الاضافة ولقد نجحت معي انا اشكرك من كل قلبي وعقبال ما تضع شرح اضافة عدد لآخر التويترات
04 يوليو, 2010 02:39 م
رااائع اخي احمد وسيتم التجريب بس استفسار اخي هل الأضافة تأثر على سرعة المدونة وشكرا جزيلا.اخوك مهند ناصر
04 يوليو, 2010 03:06 م
الاخ طارق الحمد لله لانها نجحت معك و جاري التحضير لاضافة آخر التويترات .
الاخ مهند بامكانك تجربنها على مدونتي و التاكد من سرعة التصفح..بالنسبة لي لا اجد اي مشكلة على جميع المتصفحات و كذلك وجدتها مركبة على بعض المدونات ايضا تعمل بدون مشاكل .
04 يوليو, 2010 07:06 م
إضافة ممتازة أخي أحمد و تأثير أنيق. حفظك الله و جزاك خير الجزاء.
أسأل هل يمكن تطبيقها على بعض الصور دون غيرها عبر ربطها ب class أو id أو شيء من هذا لقبيل؟ لأني أجدها ممتازة لاستعمالها كتأثير hover على الأيقونات .
تقبل تحيات أخيك محمد.
04 يوليو, 2010 10:13 م
شرفتنا بوجودك في المدونة اخي محمد .
بصراحة لم يتسنى لي تجربة الكود على مجموعة معينة من الصور و لكني اعتقد ان الكود اعلاه يمكن تخصيصه لغرض اخر عند تغير .post img الى ما نود تخصيص الكود له .
05 يوليو, 2010 01:41 م
شكرا جزيلا اخي الكريم احمد تم تجريب الأداة والحمد تمت بنجاح شكرا جزيلا اخي اخوك مهند ناصر اخي الكريم تم ارسال رسالة عن طريق نموذج اتصل بنا اتمنا الرد في انتظارك
05 يوليو, 2010 03:03 م
اضافة رائعة وممتازة أخي أحمد
دائماً تتحفنا بالجديد
بارك الله فيك
05 يوليو, 2010 04:45 م
بارك الله فيك على الأضافة الرائعة مشكور ...
ونتمنى منك متابعت البريد
05 يوليو, 2010 05:06 م
اخي مجتبى تم الرد عليك و تلبية طلبك .
06 يوليو, 2010 01:41 ص
شكرا على الكود أخي ...و تم وضعه بمدونتي
31 يوليو, 2010 09:46 م
شكرًا
تم وضعة في المدونة
جزاك الله خيرًا .
15 ديسمبر, 2010 01:18 م
الى الامام دائما