কার্সর পরিবর্তন 세상ের সবচেয়ে জনপ্রিয় প্রোপার্টি নাও হলেও, এটি ডেভেলপারদের জন্য একটি χρήদশী টুল। ব্রাউজারগুলি নির্দিষ্ট অবজেক্টের জন্য স্বয়ংক্রিয়ভাবে কার্সর পরিবর্তন করে—যেমন লিংক এবং কিছু ড্র্যাগযোগ্য আইটেমের জন্য—তবে ডেভেলপাররা তাদের ইচ্ছামতো কার্সর নির্দিষ্ট করালে আরও ভাল ফলাফল পান।
CSS-এ মাউস পয়েন্টার পরিবর্তন
কার্সারের চেহারা cursor CSS প্রোপার্টির 의해 নিয়ন্ত্রিত হয়। এই প্রোপার্টি নির্ধারণ করে যে ব্যবহারকারী অবজেক্টের ওপর মাউস আনালে কোন ধরনের কার্সর দেখাবে। উদাহরণস্বরূপ, নিচের ক্লাসের সাথে সম্পর্কিত অবজেক্টের ওপর মাউস আনালে চার দিকের ড্র্যাগিং অ্যারো দেখাবে:
.cursor { cursor: move; }
অবজেক্টের ওপর মাউস আনালে ব্যবহারকারী নিচের মতো একটি কার্সর দেখবে।
CSS-এ স্ট্যান্ডার্ড কার্সার অপশনসমূহ
আপনার কার্সার ব্যবহারের জন্য.carser অপশনের একটি ব্যাপক ধরন রয়েছে। লিস্টে দেখা "N", "S", "W", এবং "E" বলতে উত্তর, দক্ষিণ, পশ্চিম এবং পূর্বকে বোঝায়। উদাহরণস্বরূপ, cursor: e-resize; ডান পাশে অ্যারো সহ একটি রিসাইজ হ্যান্ডেল দেখাবে।
.alias {cursor: alias;} .all-scroll {cursor: all-scroll;} .auto {cursor: auto;} .cell {cursor: cell;} .context-menu {cursor: context-menu;} .col-resize {cursor: col-resize;} .copy {cursor: copy;} .crosshair {cursor: crosshair;} .default {cursor: default;} .e-resize {cursor: e-resize;} .ew-resize {cursor: ew-resize;} .grab {cursor: grab;} .grabbing {cursor: grabbing;} .help {cursor: help;} .move {cursor: move;} .n-resize {cursor: n-resize;} .ne-resize {cursor: ne-resize;} .nesw-resize {cursor: nesw-resize;} .ns-resize {cursor: ns-resize;} .nw-resize {cursor: nw-resize;} .nwse-resize {cursor: nwse-resize;} .no-drop {cursor: no-drop;} .none {cursor: none;} .not-allowed {cursor: not-allowed;} .pointer {cursor: pointer;} .progress {cursor: progress;} .row-resize {cursor: row-resize;} .s-resize {cursor: s-resize;} .se-resize {cursor: se-resize;} .sw-resize {cursor: sw-resize;} .text {cursor: text;} .url {cursor: url(myBall.cur),auto;} .w-resize {cursor: w-resize;} .wait {cursor: wait;} .zoom-in {cursor: zoom-in;} .zoom-out {cursor: zoom-out;}
CSS-Tricks.com-এর पीछे যestershire Криস কোয়িয়ার এই ডুডল তৈরি করেছেন যাতে CSS-এ বিভিন্ন কার্সার অপশন প্রদর্শন করা যায়।
ছবি কার্সার হিসেবে ব্যবহার
অনেক CSS প্রোপার্টির মতো, cursor প্রোপার্টিও URL স্পেসিফিকেশনের মাধ্যমে অ্যাট্রিবিউট নিতে পারে। উদাহরণস্বরূপ, নিচের ক্লাসটি কার্সারের জন্য সংশ্লিষ্ট ছবিটি ব্যবহার করবে।
.cursor {cursor: url('path/to/image.png'), auto;}
auto keyin একটি ফলব্যাক কার্সার নির্দেশ করে। auto অ্যাট্রিবিউটটি ব্রাউজারটি বর্তমান অবজেক্টের জন্য যা সাধারণত ব্যবহার করে তা দেখাবে। আপনি কমা-সিপারেটেড লিস্টের মাধ্যমে অতিরিক্ত ছবি নির্দিষ্ট করতে পারেন বা আপনার ফলব্যাক কার্সার হিসেবে যেকোনো কার্সার নির্দিষ্ট করতে পারেন।
.cursor {cursor: url(cursor.svg), url(path/to/image.png), wait;}
যেকোনো ধরনের অ্যানিমেশন—GIF, SVG, বা PNG-এ হোক—ব্রাউজারها সমর্থন করে না। কিন্তু ট্রান্সপারেন্ট PNG আজকার বাজারে জনপ্রিয় সকল ওয়েব ব্রাউজারে কাজ করে। SVG ফায়ারফক্সেstadium큼 ভরসামন্দ নয়, কিন্তু অন্যান্য ব্রাউজারগুলোতে ভালো কাজ করে।
ডিফল্টভাবে, কার্সারের "হট স্পট" ছবির উপরের বাম কোণে সেট থাকে। ভিন্ন "হট স্পট" নির্দেশ করতে, আপনার কার্সার কলের মধ্যে একটি (X,Y) কোঅর্ডিনেট জোড়া নির্দিষ্ট করুন। নিচের উদাহরণটি হট স্পটকে (3,3)-এ সেট করবে, যেখানে উপরের বাম (0,0)।
.cursor {cursor: url(cursor.svg) 3 3, pointer;}
উপসংহার: এই অ্যাট্রিবিউটগুলো ব্যবহার
আপনি যদি একটি ওয়েবসাইট ডেভেলপ করেন, তাহলে আপনার সাইটের যেকোনো অবজেক্টে এই CSS প্রোপার্টিগুলো যোগ করে ব্যবহারকারী যখন অবজেক্টের ওপর মাউস আনবে তখন তারা যে কার্সর দেখে সেটি পরিবর্তন করতে পারেন। আপনি যদি আরও সাহসী হন, তবে Stylus, TamperMonkey, বা GreaseMonkey-এর মতো ব্রাউজার এক্সটেনশন ব্যবহার করে যেকোনো ওয়েবসাইটের ওপর আপনার ইচ্ছামতো CSS এক্সিকিউট করতে পারেন। এইভাবে আপনি যেকোনো সময় এবং যেকোনো জায়গায় আপনার নিজস্ব কাস্টম কার্সার দেখাতে পারেন।
