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

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

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

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

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

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

body,html{
	cursor:url( آدرس عکس مورد نظر ),auto;	
}

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

body,html{
	cursor:url(cursor.cur),auto;	
}

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

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

a:hover{
	cursor:url(cursor.cur),auto;	
}

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

body,html{
	cursor:url(cursor.cur),url(cursor.png),auto;	
}

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

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

پخش اختصاصی

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