جهت ورود به تالار گفتمان سایت کلیک کنید


آموزش قرار دادن عکس دلخواه به جای cursor ماوس در وب سایت

برای این پست از سایت اسکریپت دات کام , یک ترفند جالب که از ویژگیهای تقریبا جدید css به شمار میاد رو به شما کاربران محترم معرفی خواهم کرد .

در زمان های قبل تر چنانچه قصد تغییر ماوس یا همان cursor در وب سایت را داشتیم باید رو به جاوا اسکریپت میاوردیم که طبیعتا معایب و مشکلات خود رو داشت .

اما به تازگی این امکان در css فراهم شده که شما میتوانید عکس png یا jpg و یا gif خود را به جای cursor در وب سایت خود قرار دهید .

آموزش قرار دادن عکس دلخواه به جای cursor ماوس در وب سایت

 

برای این کار کافیست یک عکس با یکی از پسوند های cur , png , jpg , gif , ani داشته باشید . ( سعی کنید حتما cur باشد و چنانچه عکس شما دارای چنین پسوندی نیست , از این سایت تبدیل به cur نمایید ).

حال کد زیر را در css خود قرار دهید .

مثلا اگر آدرس عکس شما cursor.cur باشد :

نکته مهم :  کد بالا برای نمایش در کل وب سایت نوشته شده و طبیعتا اگر فقط میخواهید در حالت لینک داشته باشید میتوانید a:hover را به جای انتخابگر بنویسید و اگر مثلا فقط برای تگ h1 میخواید , به جای انتخابگر h1 را بنویسید .

به عنوان مثال برای تگ های لینک در حالت ها ( hover ) :

توجه : پسوند cur , پسوندی قابل فهم برای سیستم عامل ویندوز میباشد . به همین خاطر فقط در این سیستم عامل قابل نمایش میباشد . شما اگر قصد دارید برای سیستم عامل های دیگر هم بهینه سازی داشته باشید , میتوانید عکس مورد نظر خود را به 2 پسوند cur و png تبدیل و سپس به روش زیر آدرس دهی نمایید :

دموی آماده آموزش

فایل آماده آموزش

پخش اختصاصی

آموزش : وحید مجیدی

  • امتیاز شما به این مقاله ؟
    خیلی بدبدمعمولیخوبخیلی خوب (لطفا رای بدید)
  • جهت تبادل گفتگو و حل مشکلات در باره این موضوع , کلیک کنید

    4 پاسخ به “آموزش قرار دادن عکس دلخواه به جای cursor ماوس در وب سایت”

    1. تجهیزات آشپزخانه گفت:

      خیلی کدهای عالی هست ، حتما از کد ماوس توی سایتم استفاده می کنم خیلی جذاب میشه سایت ، تشکر

    2. قاسم پور گفت:

      ممنون از زحماتتون

    3. mohammad گفت:

      Thanks

    4. ali گفت:

      سلام
      ممنون واقعا این مورد خیلی به دردم خورد
      با تشکر

    دیدگاهتان را بنویسید

    نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *