آموزش ویژگی مکان نما در CSS

4 سال پیش

امتیاز دهید post

آموزش ویژگی مکان نما در CSS

در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش ویژگی مکان نما در CSS خواهیم پرداخت.

ویژگی مکان نما CSS به شما امکان می دهد نوع مکان نما را که باید برای کاربر نمایش داده شود مشخص کنید.

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

جدول زیر مقادیر ممکن برای ویژگی مکان نما را نشان می دهد –

.	Value & Description
1	auto Shape of the cursor depends on the context area it is over. For example an I over text, a hand over a link, and so on…
2	crosshair علامت ضربدر یا بعلاوه
3	default یک پیکان
4	pointer یک اشاره گر دست
5	move I میله
6	e-resize مکان نما نشان می دهد که یک لبه جعبه قرار است به سمت راست (شرق) منتقل شود
7	ne-resize مکان نما نشان می دهد که یک لبه جعبه قرار است به سمت بالا و راست (شمال / شرق) منتقل شود
8	nw-resize مکان نما نشان می دهد که یک لبه جعبه قرار است به سمت بالا و چپ (شمال / غرب) منتقل شود
9	n-resize مکان نما نشان می دهد که یک لبه جعبه قرار است به سمت بالا (شمال) منتقل شود
10	se-resize مکان نما نشان می دهد که یک لبه جعبه قرار است به سمت پایین و راست (جنوب / شرق) منتقل شود
11	sw-resize مکان نما نشان می دهد که یک لبه جعبه قرار است به سمت پایین و چپ (جنوب / غرب) منتقل شود
12	s-resize مکان نما نشان می دهد که یک لبه جعبه قرار است به پایین (جنوب) منتقل شود
13	w-resize مکان نما نشان می دهد که یک لبه جعبه قرار است به سمت چپ (غرب) منتقل شود
14	text I میله
15	wait ساعت شنی
16	help یک علامت سوال یا بادکنک، ایده آل برای استفاده از دکمه های راهنما
17	<url> منبع یک فایل تصویری مکان نما

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

در اینجا یک مثال آورده شده است –

&lt;html&gt;
   &lt;head&gt;
   &lt;/head&gt;
   
   &lt;body&gt;
      &lt;p&gt;Move the mouse over the words to see the cursor change:&lt;/p&gt;
      
      &lt;div style = "cursor:auto"&gt;Auto&lt;/div&gt;
      &lt;div style = "cursor:crosshair"&gt;Crosshair&lt;/div&gt;
      &lt;div style = "cursor:default"&gt;Default&lt;/div&gt;
      
      &lt;div style = "cursor:pointer"&gt;Pointer&lt;/div&gt;
      &lt;div style = "cursor:move"&gt;Move&lt;/div&gt;
      &lt;div style = "cursor:e-resize"&gt;e-resize&lt;/div&gt;
      &lt;div style = "cursor:ne-resize"&gt;ne-resize&lt;/div&gt;
      &lt;div style = "cursor:nw-resize"&gt;nw-resize&lt;/div&gt;
      
      &lt;div style = "cursor:n-resize"&gt;n-resize&lt;/div&gt;
      &lt;div style = "cursor:se-resize"&gt;se-resize&lt;/div&gt;
      &lt;div style = "cursor:sw-resize"&gt;sw-resize&lt;/div&gt;
      &lt;div style = "cursor:s-resize"&gt;s-resize&lt;/div&gt;
      &lt;div style = "cursor:w-resize"&gt;w-resize&lt;/div&gt;
      
      &lt;div style = "cursor:text"&gt;text&lt;/div&gt;
      &lt;div style = "cursor:wait"&gt;wait&lt;/div&gt;
      &lt;div style = "cursor:help"&gt;help&lt;/div&gt;
   &lt;/body&gt;
&lt;/html&gt;

<html>

<head>

</head>

<body>

<p>Move the mouse over the words to see the cursor change:</p>

<div style = "cursor:crosshair">Crosshair</div>

<div style = "cursor:default">Default</div>

<div style = "cursor:pointer">Pointer</div>

<div style = "cursor:e-resize">e-resize</div>

<div style = "cursor:ne-resize">ne-resize</div>

<div style = "cursor:nw-resize">nw-resize</div>

<div style = "cursor:n-resize">n-resize</div>

<div style = "cursor:se-resize">se-resize</div>

<div style = "cursor:sw-resize">sw-resize</div>

<div style = "cursor:s-resize">s-resize</div>

<div style = "cursor:w-resize">w-resize</div>

</body>

</html>

خروجی به شکل زیر می باشد:

Move the mouse over the words to see the cursor change:

Auto
Crosshair
Default
Pointer
Move
e-resize
ne-resize
nw-resize
n-resize
se-resize
sw-resize
s-resize
w-resize
text
wait
help

Move the mouse over the words to see the cursor change:

Auto

Crosshair

Default

Pointer

Move

e-resize

ne-resize

nw-resize

n-resize

se-resize

sw-resize

s-resize

w-resize

text

wait

help

منبع.

لیست جلسات قبل آموزش CSS

امتیاز دهید post

برچسب ها : آموزش CSS آموزش طراحی وب سایت

نویسنده مطلب saber

آموزش ویژگی مکان نما در CSS

آموزش ویژگی مکان نما در CSS

لیست جلسات قبل آموزش CSS

دیدگاه شما

بدون دیدگاه

آموزش ویژگی مکان نما در CSS

لیست جلسات قبل آموزش CSS

دیدگاه شما

برای صرف‌نظر کردن از پاسخ‌گویی اینجا را کلیک نمایید.

بدون دیدگاه