آموزش CSS - نشانگرها(cursors)

نشانگر(Cursor) در CSS،  برای تعیین نوع نشانگر موس به هنگام حرکت موس بر روی ناحیه خاص یا لینک موجود در صفحات وب مورد استفاده قرار می گیرد.

نشانگر می‌تواند مقادیر زیر را داشته باشد:

• <url>: (اختیاری) شما می‌توانید از() url که هرکدام به یک فایل تصویر اشاره دارد با استفاده از کاما استفاده کنید.

• <x> <y>: (اختیاری) شما می‌توانید مختصات x و y برای نشانگر ماوس را مشخص کنید به طوری که موقعیت دقیق داخل تصویر نشانگر را مشخص شود.

• <مقادیر>: مقادیر ، نوع نشانگر یا نشانگر جایگزین را در صورت عدم بارگذاری نمادهای مشخص‌شده نمایش  می دهد.

ویژگی  نشانگر 

برای ویژگی cursor ، از مقادیر مختلفی می توان استفاده کرد:

مقادیر	مثال	توضیحات
auto		شکل  ظاهری مکان نما یا نشانگر موس، به حالتی تبدیل می شود که مرورگر بر اساس شرایط تگ html مورد نظر شکل مکان نما را تعیین می کند.
default		شکل  ظاهری مکان نما یا نشانگر موس، به حالتی تبدیل می شود که مکان‌نمای پیشفرض سیستم عاملی که کاربر با آن، سایت ما را مشاهده می کند در می آید که اکثرا به شکل فلش می باشد.
none		شکل ظاهری مکان نما یا نشانگر موس برای عنصر مورد نظر نمایش داده نخواهد شد.
context-menu		شکل ظاهری مکان نما یا نشانگر موس  به حالتی تبدیل می شود که یک منوی گرافیکی در کنار فلش برای نمایش مکان‌ نما وجود خواهد داشت.توجه داشته باشید که مرورگر IE10 به بالا از مقدار context-menu پشتیبانی می کند و مرورگرهای فایرفاکس و اپرا و سافاری از این مقدار پشتیبانی نمی کنند.
help		شکل ظاهری مکان نما یا نشانگر موس به حالتی تبدیل می شود که برای عنصر مورد نظر به شکل علامت سوال نمایش داده شود.
pointer		شکل ظاهری مکان نما یا نشانگر موس به حالتی تبدیل می شود که مشخص کند عنصر مربوطه قابل ردوبدل کردن مطالب است (مثلا لینک) و به شکل دست خواهد بود.
progress		شکل ظاهری مکان نما یا نشانگر موس به حالتی تبدیل می شود که مرورگر در حال انجام عملیاتی در پس زمینه است اما کاربر می تواند همچنان در سایت به کار خود ادامه دهد.
wait		شکل ظاهری مکان نما یا نشانگر موس به حالتی تبدیل می شود که مرورگر مشغول انجام کاری است که کاربر باید تا اتمام آن صبر کند و نمی توانددرسایت به کار خود ادامه دهد این حالت برعکس progress می باشد.
alias		شکل ظاهری مکان نما یا نشانگر موس به حالتی تبدیل می شود که می توان یک مستعار یا میانبری برای عنصر موجود بوجود آورد.
copy		شکل ظاهری مکان نما یا نشانگر موس به حالتی تبدیل می شود که می توان مشخص کرد که عنصر قابل کپی کردن می باشد
move		شکل ظاهری مکان نما یا نشانگر موس به حالتی تبدیل می شود که عنصر قابلیت تغییر مکان را دارد.
no-drop		شکل ظاهری مکان نما یا نشانگر موس به حالتی تبدیل می شود که نشان می دهد که آیتم  انتخابی نمی تواند روی عنصر مورد نظر رها شود.
not-allowed		شکل ظاهری مکان نما یا نشانگر موس به حالتی تبدیل می شود که نشان می دهد که یک عملیات قابل  انجام نمی باشد
grab		شکل ظاهری مکان نما یا نشانگر موس به حالتی تبدیل می شود که  باعث تغییر نوع نشانگر ماوس به یک دسته (grab) می‌شود که نمایانگر امکان برداشتن یا نگه داشتن چیزی است.
grabbing		شکل ظاهری مکان نما یا نشانگر موس به حالتی تبدیل می شود که نمایانگر گرفتن یا برداشتن چیزی است. معمولاً این ویژگی در وبسایت‌ها برای اشیاءی که می‌توانند با ماوس حرکت کنند، مثل المان‌های قابل جابجایی یا نمودارهای تعاملی، استفاده می‌شود.
cell		شکل ظاهری مکان نما یا نشانگر موس به حالتی تبدیل می شود که نشان می دهد که سلول جدول می تواند انتخاب شود.
crosshair		شکل ظاهری مکان نما یا نشانگر موس به حالتی تبدیل می شود که نشان دهنده انتخاب یک تصویر می باشد.
text		شکل ظاهری مکان نما یا نشانگر موس به حالتی تبدیل می شود که نشان دهنده  انتخاب متن می باشد
vertical-text		شکل ظاهری مکان نما یا نشانگر موس به حالتی تبدیل می شود که  نشان دهنده انتخاب متن به صورت عمودی می باشد.
zoom-in		شکل ظاهری مکان نما یا نشانگر موس به حالتی تبدیل می شود که  نشان دهنده بزرگ‌نمایی است، نشان می‌دهد که یک شیء را می‌توانید از طریق بزرگ‌نمایی ،zoom-in کنید.
zoom-out		شکل ظاهری مکان نما یا نشانگر موس به حالتی تبدیل می شود که  نشان دهنده کوچک نمایی است، نشان می‌دهد که یک شیء را می‌توانید از طریق کوچک نمایی،zoom-out کنید.
all-scroll		شکل ظاهری مکان نما یا نشانگر موس به حالتی تبدیل می شود که امکان اسکرول در تمامی جهت‌ها وجود داد.
col-resize		شکل ظاهری مکان نما یا نشانگر موس به حالتی تبدیل می شود که امکان تغییر اندازه در جهت افقی وجود دارد.
row-resize		شکل ظاهری مکان نما یا نشانگر موس به حالتی تبدیل می شود که امکان تغییر اندازه در جهت عمودی وجود دارد.
n-resize		شکل ظاهری مکان نما یا نشانگر موس به حالتی تبدیل می شود که امکان  تغییر اندازه یا حرکت به جهت شمال وجود دارد.
e-resize		شکل ظاهری مکان نما یا نشانگر موس به حالتی تبدیل می شود که امکان  تغییر اندازه یا حرکت به جهت شرق وجود دارد.
s-resize		شکل ظاهری مکان نما یا نشانگر موس به حالتی تبدیل می شود که امکان  تغییر اندازه یا حرکت به جهت جنوب وجود دارد.
w-resize		شکل ظاهری مکان نما یا نشانگر موس به حالتی تبدیل می شود که امکان  تغییر اندازه یا حرکت به جهت غرب وجود دارد.
ne-resize		شکل ظاهری مکان نما یا نشانگر موس به حالتی تبدیل می شود که امکان  تغییر اندازه یا حرکت به جهت شمال-شرق وجود دارد.
nw-resize		شکل ظاهری مکان نما یا نشانگر موس به حالتی تبدیل می شود که امکان  تغییر اندازه یا حرکت به جهت شمال-غرب وجود دارد.
se-resize		شکل ظاهری مکان نما یا نشانگر موس به حالتی تبدیل می شود که امکان  تغییر اندازه یا حرکت به جهت جنوب-شرق وجود دارد.
sw-resize		شکل ظاهری مکان نما یا نشانگر موس به حالتی تبدیل می شود که امکان  تغییر اندازه یا حرکت به جهت جنوب-غرب وجود دارد.

 اگر بخواهیم برای تمام عناصر HTML اعمال شود:

object.style.cursor = "pointer";

در ادامه، یک مثال آورده شده است که انواع مختلف نشانگرها در CSS را نشان می‌دهد :

<html>
<head>
<title>All CSS Cursors</title>
<style>
   .demo-cursor {
      display: inline-block;
      background-color: LightYellow;
      width: 100px;
      height: 100px;
      margin: 10px;
      border: 3px solid #ccc;
      cursor: pointer;
   }
   .default { cursor: default; }
   .auto { cursor: auto; }
   .crosshair { cursor: crosshair; }
   .pointer { cursor: pointer; }
   .move { cursor: move; }
   .text { cursor: text; }
   .wait { cursor: wait; }
   .help { cursor: help; }
   .not-allowed { cursor: not-allowed; }
   .progress { cursor: progress; }
   .alias { cursor: alias; }
   .copy { cursor: copy; }
   .no-drop { cursor: no-drop; }
   .e-resize { cursor: e-resize; }
   .n-resize { cursor: n-resize; }
   .ne-resize { cursor: ne-resize; }
   .nw-resize { cursor: nw-resize; }
   .s-resize { cursor: s-resize; }
   .se-resize { cursor: se-resize; }
   .sw-resize { cursor: sw-resize; }
   .w-resize { cursor: w-resize; }
   .ew-resize { cursor: ew-resize; }
   .ns-resize { cursor: ns-resize; }
   .nesw-resize { cursor: nesw-resize; }
   .nwse-resize { cursor: nwse-resize; }
   .col-resize { cursor: col-resize; }
   .row-resize { cursor: row-resize; }
   .zoom-in { cursor: zoom-in; }
   .zoom-out { cursor: zoom-out; }
   .grab { cursor: grab; }
   .grabbing { cursor: grabbing; }
</style>
</head>
<body>
<h1>All CSS Cursors, hover the mouse on the blocks.</h1>
   <div class="demo-cursor auto"><h3 style="text-align:center;">Auto</h3></div>
   <div class="demo-cursor default"><h3 style="text-align:center;">Default</h3></div>
   <div class="demo-cursor crosshair"><h3 style="text-align:center;">Crosshair</h3></div>
   <div class="demo-cursor pointer"><h3 style="text-align:center;">Pointer</h3></div>
   <div class="demo-cursor move"><h3 style="text-align:center;">Move</h3></div>
   <div class="demo-cursor text"><h3 style="text-align:center;">Text</h3></div>
   <div class="demo-cursor wait"><h3 style="text-align:center;">Wait</h3></div>
   <div class="demo-cursor help"><h3 style="text-align:center;">Help</h3></div>
   <div class="demo-cursor not-allowed"><h3 style="text-align:center;">Not-allowed</h3></div>
   <div class="demo-cursor progress"><h3 style="text-align:center;">Progress</h3></div>
   <div class="demo-cursor alias"><h3 style="text-align:center;">Alias</h3></div>
   <div class="demo-cursor copy"><h3 style="text-align:center;">Copy</h3></div>
   <div class="demo-cursor no-drop"><h3 style="text-align:center;">No-drop</h3></div>
   <div class="demo-cursor e-resize"><h3 style="text-align:center;">e-resize</h3></div>
   <div class="demo-cursor n-resize"><h3 style="text-align:center;">n-resize</h3></div>
   <div class="demo-cursor ne-resize"><h3 style="text-align:center;">ne-resize</h3></div>
   <div class="demo-cursor nw-resize"><h3 style="text-align:center;">nw-resize</h3></div>
   <div class="demo-cursor s-resize"><h3 style="text-align:center;">s-resize</h3></div>
   <div class="demo-cursor se-resize"><h3 style="text-align:center;">se-resize</h3></div>
   <div class="demo-cursor sw-resize"><h3 style="text-align:center;">sw-resize</h3></div>
   <div class="demo-cursor w-resize"><h3 style="text-align:center;">w-resize</h3></div>
   <div class="demo-cursor ew-resize"><h3 style="text-align:center;">ew-resize</h3></div>
   <div class="demo-cursor ns-resize"><h3 style="text-align:center;">ns-resize</h3></div>
   <div class="demo-cursor nesw-resize"><h3 style="text-align:center;">nesw-resize</h3></div>
   <div class="demo-cursor nwse-resize"><h3 style="text-align:center;">nwse-resize</h3></div>
   <div class="demo-cursor col-resize"><h3 style="text-align:center;">col-resize</h3></div>
   <div class="demo-cursor row-resize"><h3 style="text-align:center;">row-resize</h3></div>
   <div class="demo-cursor zoom-in"><h3 style="text-align:center;">Zoom-in</h3></div>
   <div class="demo-cursor zoom-out"><h3 style="text-align:center;">Zoom-out</h3></div>
   <div class="demo-cursor grab"><h3 style="text-align:center;">Grab</h3></div>
   <div class="demo-cursor grabbing"><h3 style="text-align:center;">Grabbing</h3></div>
</body>
</html>

در زیر، یک مثال آورده شده است که استفاده از تصویر به عنوان مقدار نشانگر را نشان می‌دهد :

<html>
<head>
<title>All CSS Cursors</title>
<style>
   .demo-cursor {
      display: inline-block;
      background-color: LightYellow;
      width: 100px;
      height: 100px;
      margin: 10px;
      border: 3px solid #ccc;
      cursor: url(images/try-it.jpg), pointer;
   }
</style>
</head>
<body>
<h1>Image CSS Cursors, hover the mouse on the block.</h1>
   <div class="demo-cursor"><h3 style="text-align:center;">Image Cursor</h3></div>
  </div>
</body>
</html>

در زیر، یک مثال آورده شده است که نشان می‌دهد چگونه از تصاویر چندگانه (جدا شده با ویرگول) به عنوان مقادیر نشانگر استفاده کنیم :

<html>
<head>
<title>All CSS Cursors</title>
<style>
   .demo-cursor {
      display: inline-block;
      background-color: LightYellow;
      width: 100px;
      height: 100px;
      margin: 10px;
      border: 3px solid #ccc;
      cursor: url(images/try-it.jpg),url(images/cursor-pointer.png), crosshair;
   }
</style>
</head>
<body>
<h1>Image CSS Cursors, hover the mouse on the block.</h1>
   <div class="demo-cursor"><h3 style="text-align:center;">Image Cursor</h3></div>
  </div>
</body>
</html>

سعی کنید نام فایل تصویر اول را به try-it-1.jpg تغییر دهید (تا تصویر پیدا نشود) و سپس برنامه را اجرا کنید. تا نحوه  جایگزین شدن  را مشاهده کنید، به عبارت دیگر هنگامی که تصویر اول پیدا نمی‌شود، کنترل به تصویر دوم منتقل می‌شود و حتی اگر آن نشانگر هم پیدا نشود، به عنوان نشانگر اصلی استفاده می‌شود و در نهایت اگر همه تصاویر پیدا نشوند، به نشانگر متقاطع (crosshair) منتقل می‌شود.