Css

|

اموزش تغییر ماوس

شاید شما هم گاهی به این مورد توجه کرده باشید که در بعضی از سایت ها نشانگر ماوس به شکل های مختلف در می آید.

در این مقاله سعی به آموزش تغییر نشانگر ماوس داریم تا شاید اگر طراح وبی بر حسب نیاز و سلیقه ، نیاز به این کار داشت با یکسری کدهای ابتدایی برای وی میسر باشد.

با استفاده از استایل در Css این امکان وجود دارد تا زمانی که ماوس روی قسمت مشخصی از صفحه میرود به شکل جدیدی تبدیل شود.

cursor: نوع نشانگری که مورد نظر ماست

برای مثال فرض کنید طراح میخواهد زمانی که کاربر روی قسمت خاصی از صفحه رفت نشانگر ماوس به شکل بعلاوهتبدیل شود.

<span style="cursor: Crosshair; ">ماوس به شکل بعلاوه.</span>

مثال بالا را اگر در صفحه خود اجرا کنید مشاهده میکنید زمانی که ماوس شما بر روی عبارت "ماوس به شکل بعلاوه" میرود شکل آن تغییر میکند.

حال شکل های مختلف این مشخصه را به شما معرفی میکنیم:

Auto: شکل موس با توجه به تنظیمات مرورگر کاربر تغییر میکند

Crosshair : شکل موس به صورت یک بعلاوه ( + ) تغییر میکند.

Default : به صورت default قرار میکیرد یعنی شکل همیشگی موس.

Move : شکل موس به صورت زمانی در می آید که میخواهد چیزی را در صفحه جا به جا کنید.

Pointer : شکل موس به صورت یک دست در می آید.

Help : در این حالت یک علامت سوال در کنار پیکان نشانگر موس قرار میگیرد.

Text : به شکلی در می آید که بر روی متنها به خود می گیرد.

Wait : شکل یک ساعت شنی را به خود میگیرد.

n-resize : فلش به سمت بالا

s-resize : فلش به سمت پایین

e-resize : فلش به سمت شرق

w-resize : فلش به سمت غرب

ne-resize: یک فلش به سمت شمال شرقی

nw-resize : یک فلش به سمت شمال غربی

se-resize: یک فلش به سمت شمال غربی

sw-resize : یک فلش به سمت جنوب غربی

اکنون یک کد به صورت کلی مینویسم برای درک بیشتر مطلب برای شما

<!DOCTYPE html>
<html> <body> <p>Mouse over the words to change the cursor.</p> <span style="cursor:auto">auto</span><br> <span style="cursor:crosshair">crosshair</span><br> <span style="cursor:default">default</span><br> <span style="cursor:e-resize">e-resize</span><br> <span style="cursor:help">help</span><br> <span style="cursor:move">move</span><br> <span style="cursor:n-resize">n-resize</span><br> <span style="cursor:ne-resize">ne-resize</span><br> <span style="cursor:nw-resize">nw-resize</span><br> <span style="cursor:pointer">pointer</span><br> <span style="cursor:progress">progress</span><br> <span style="cursor:s-resize">s-resize</span><br> <span style="cursor:se-resize">se-resize</span><br> <span style="cursor:sw-resize">sw-resize</span><br> <span style="cursor:text">text</span><br> <span style="cursor:w-resize">w-resize</span><br> <span style="cursor:wait">wait</span><br> </body> </html>

css طراحی سایت اموزش css

دریافت آخرین مطالب وبلاگ در کانال داتینه

بهاره شهسواری

بهاره شهسواری ، کارشناس نرم افزار هستم .
از سال 91 مشغول به یادگیری زبان های css ,html , javascript و jquery شدم
و از سال 93 به صورت اختصاصی به فعالیت در حوزه css و html پرداختم. علاوه بر کد نویسی به گرافیک هم علاقه مند هستم.

نظرات
نظر بدهید