HTML ডকুমেন্টের বিভিন্ন এলিমেন্টের জন্য কার্সর ইমেজ ম্যানিপুলেট করতে CSS cursor প্রপার্টি ব্যবহার করা যায়।
সিনট্যাক্স
CSS cursor প্রপার্টির সিনট্যাক্স নিম্নরূপ: Selector { cursor: /*মান*/ }
CSS cursor প্রপার্টির মানগুলো নিম্নরূপ:
| ক্রমিক নং | মান ও বর্ণনা |
|---|---|
| 1 | alias কোনো কিছুর আলায়াস তৈরি করা হবে তা নির্দেশ করে |
| 2 | all-scroll কোনো কিছু যেকোনো দিকে স্ক্রোল করা যায় তা নির্দেশ করে |
| 3 | auto ডিফল্ট, ব্রাউজার একটি কার্সর সেট করে |
| 4 | cell একটি সেল (বা সেলের সেট) সিলেক্ট করা যেতে পারে তা নির্দেশ করে |
| 5 | context-menu একটি কন্টেক্স্ট-মেনু উপলব্ধ তা নির্দেশ করে |
| 6 | col-resize কলাম অনুভূমিকভাবে রিসাইজ করা যায় তা নির্দেশ করে |
| 7 | copy কোনো কিছু কপি করা হবে তা নির্দেশ করে |
| 8 | crosshair ক্রসহেয়ার হিসেবে রেন্ডার হয় |
| 9 | default ডিফল্ট কার্সর রেন্ডার করে |
| 10 | e-resize একটি বক্সের এজ ডানে (ইস্ট) সরানো হবে তা নির্দেশ করে |
| 11 | ew-resize দ্বিমুখী রিসাইজ কার্সর নির্দেশ করে |
| 12 | grab কোনো কিছু গ্র্যাব করা যায় তা নির্দেশ করে |
| 13 | grabbing কোনো কিছু গ্র্যাব করা যায় তা নির্দেশ করে |
| 14 | help সহায়তা উপলব্ধ তা নির্দেশ করে |
| 15 | move কোনো কিছู সরানো হবে তা নির্দেশ করে |
| 16 | n-resize একটি বক্সের এজ উপরে (নর্থ) সরানো হবে তা নির্দেশ করে |
| 17 | ne-resize একটি বক্সের এজ উপরে এবং ডানে (নর্থ/ইস্ট) সরানো হবে তা নির্দেশ করে |
| 18 | nesw-resize দ্বিমুখী রিসাইজ কার্সর নির্দেশ করে |
| 19 | ns-resize দ্বিমুখী রিসাইজ কার্সর নির্দেশ করে |
| 20 | nw-resize একটি বক্সের এজ উপরে এবং বামে (নর্থ/ওয়েস্ট) সরানো হবে তা নির্দেশ করে |
| 21 | nwse-resize দ্বিমুখী রিসাইজ কার্সর নির্দেশ করে |
| 22 | no-drop ড্র্যাগ করা আইটেম এখানে ড্রপ করা যাবে না তা নির্দেশ করে |
| 23 | none এলিমেন্টের জন্য কোনো কার্সর রেন্ডার হয় না |
| 24 | not-allowed অনুরোধ করা অ্যাকশন এক্সিকিউট হবে না তা নির্দেশ করে |
| 25 | pointer এটি একটি পয়েন্টার এবং একটি লিংক নির্দেশ করে |
| 26 | progress প্রোগ্রাম ব্যস্ত (প্রগতिशীল) তা নির্দেশ করে |
| 27 | row-resize রো লম্বভাবে রিসাইজ করা যায় তা নির্দেশ করে |
| 28 | s-resize একটি বক্সের এজ নিচে (সাউথ) সরানো হবে তা নির্দেশ করে |
| 29 | se-resize একটি বক্সের এজ নিচে এবং ডানে (সাউথ/ইস্ট) সরানো হবে তা নির্দেশ করে |
| 30 | sw-resize একটি বক্সের এজ নিচে এবং বামে (সাউথ/ওয়েস্ট) সরানো হবে তা নির্দেশ করে |
| 31 | text সিলেক্ট করা যেতে পারে এমন টেক্সট নির্দেশ করে |
| 32 | URL কাস্টম কার্সরের URL-এর কমা-সেপারেটেড তালিকা, শেষে জেনেরিক কার্সর ফেইল-সেফ হিসেবে থাকে |
| 33 | vertical-text সিলেক্ট করা যেতে পারে এমন ভার্টিক্যাল টেক্সট নির্দেশ করে |
| 34 | w-resize একটি বক্সের এজ বামে (ওয়েস্ট) সরানো হবে তা নির্দেশ করে |
| 35 | wait প্রোগ্রাম ব্যস্ত তা নির্দেশ করে |
| 36 | zoom-in কোনো কিছু জুম ইন করা যায় তা নির্দেশ করে |
| 37 | zoom-out কোনো কিছু জুম আউট করা যায় তা নির্দেশ করে |
| 38 | initial cursor প্রপার্টিকে এর ডিফল্ট মান সেট করে। |
| 39 | inherit এটি প্যারেন্ট এলিমেন্ট থেকে cursor প্রপার্টি ইনহেরিট করে। |
CSS cursor প্রপার্টি বাস্তবায়নের একটি উদাহরণ নিচে দেওয়া হল:
উদাহরণ
<!DOCTYPE html> <html> <head> <style> div { margin: 5px; float: left; } #one { background-color: beige; } #two { background-color: lavender; } .n-resize {cursor: n-resize;} .ne-resize {cursor: ne-resize;} .nw-resize {cursor: nw-resize;} .not-allowed {cursor: not-allowed;} .pointer {cursor: pointer;} </style></head> <body> <div id="one"> <div class="nw-resize">left corner</div><div class="n-resize">up</div> <div class="ne-resize">right corner</div> </div> <div id="two"> <div class="not-allowed">Not-allowed</div><div class="pointer">Pointer</div> </div> </body> </html>
আউটপুট
