شاطر
اذهب الى الأسفل
avatar
مؤسسي المركز
مؤسسي المركز
القوس
عدد المساهمات : 330
متصفح الويب : Chrome
منتدى نسخة : PhpBB3
النقاط : 518
السٌّمعَة : 49
تاريخ التسجيل : 03/06/2015
العمر : 24
معاينة صفحة البيانات الشخصي للعضوhttp://www.t-mrkz.com/

default جافا سكربت تغير الصورة عن المرور عليها

في الأحد سبتمبر 13, 2015 7:14 am
السلام عليكم


أقدم لكم كود رائع يقوم بتغير الصورة عن المرور عليها الى أي صورة أخرى


كود يقبل في التومبلايت واي مكان يقبل اكواد HTML

الكود:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<img src="http://dummyimage.com/100x100/000000/ffffff&text=Image+1"
       data-hover="http://dummyimage.com/100x100/ffffff/000000&text=Image+2"
       data-out="http://dummyimage.com/100x100/000000/ffffff&text=Image+1" />

كود الجافا سكربت
الكود:
  $('img').on('mouseover',function () {
        var data = $(this).attr('data-hover');
        $(this).attr("src", data); // data-hover
    })
    $('img').on('mouseout', function() {
        var data = $(this).attr('data-out');
        $(this).attr("src", data); // data-out
    });


Like a Star @ heaven لتغير الصورة الأولى ابحث على http://dummyimage.com/100x100/000000/ffffff&text=Image+1 
Like a Star @ heaven لتغير رابط الصورة الثانية  http://dummyimage.com/100x100/ffffff/000000&text=Image+2
cheers
عضو جديد
عدد المساهمات : 47
النقاط : 49
السٌّمعَة : 0
تاريخ التسجيل : 20/07/2015
معاينة صفحة البيانات الشخصي للعضو

default رد: جافا سكربت تغير الصورة عن المرور عليها

في الإثنين مارس 07, 2016 6:28 am
طرحت فأبدعت يعطيك الف عافية
جهود مبارك جزاك الله خير
دمت ودام عطائك
ودائما بأنتظار جديدك الشيق
لك خالص تقديري واحترامي
دمت بخير
الرجوع الى أعلى الصفحة
صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى