কার্সার পরিবর্তন বিশ্বের সবচেয়ে জনপ্রিয় সম্পত্তি নাও হতে পারে, কিন্তু এটি এখনও বিকাশকারীদের জন্য একটি দরকারী টুল। যদিও ব্রাউজারগুলি স্বয়ংক্রিয়ভাবে কিছু বস্তুর জন্য কার্সার পরিবর্তন করবে, যেমন লিঙ্ক এবং কিছু টেনে আনা যায় এমন আইটেম, ডেভেলপাররা তাদের পছন্দসই কার্সার নির্দিষ্টভাবে নির্দিষ্ট করে আরও ভাল ফলাফল পেতে পারে।
CSS-এ মাউস পয়েন্ট পরিবর্তন করুন
কার্সারের উপস্থিতি কার্সার CSS বৈশিষ্ট্য দ্বারা নিয়ন্ত্রিত হয়। ব্যবহারকারী বস্তুর উপর মাউস দিলে এই বৈশিষ্ট্যটি রেন্ডার করা কার্সারের ধরন নিয়ন্ত্রণ করে। উদাহরণস্বরূপ, নীচের ক্লাসের সাথে যুক্ত বস্তুর উপর মাউসিং করলে একটি চার দিকনির্দেশক ড্র্যাগিং তীর তৈরি হবে:
.cursor { cursor: move;} বস্তুর উপর মাউসিং করার সময়, ব্যবহারকারী নীচের মত একটি কার্সার দেখতে পাবেন।
সিএসএস-এ স্ট্যান্ডার্ড কার্সার বিকল্পগুলি
আপনার কার্সার ব্যবহারের জন্য আপনি সেট করতে পারেন এমন বিভিন্ন ধরণের কার্সার বিকল্প রয়েছে। মনে রাখবেন যে "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-এর পিছনের উইজার্ড Chris Coyier, CSS-এ বিভিন্ন কার্সার অপশন দেখাতে সাহায্য করার জন্য এই ডুডলটি তৈরি করেছেন।
কারসার হিসেবে ছবি ব্যবহার করা
অনেক CSS প্রপার্টির মত, কার্সার প্রপার্টিও ইউআরএল স্পেসিফিকেশনের মাধ্যমে অ্যাট্রিবিউট নিতে পারে। উদাহরণস্বরূপ, নীচের শ্রেণীটি কার্সারের জন্য সংশ্লিষ্ট চিত্র ব্যবহার করবে।
.cursor {cursor: url('path/to/image.png'), auto;} অটো পরে একটি ফলব্যাক কার্সার নির্দিষ্ট করে। স্বয়ংক্রিয় বৈশিষ্ট্য ব্রাউজার সাধারণত কার্সারের নীচে বর্তমান বস্তুর জন্য যে কার্সার ব্যবহার করবে তা দেখাবে। আপনি একটি কমা-বিভক্ত তালিকার সাথে অতিরিক্ত চিত্রগুলিও নির্দিষ্ট করতে পারেন বা আপনার ফলব্যাক কার্সার হিসাবে কাজ করার জন্য যে কোনও কার্সার নির্দিষ্ট করতে পারেন৷
.cursor {cursor: url(cursor.svg), url(path/to/image.png), wait;} GIF, SVG বা PNG যেকোন ধরনের অ্যানিমেশন, ব্রাউজার দ্বারা অসমর্থিত। কিন্তু স্বচ্ছ পিএনজি আজ বাজারে সব জনপ্রিয় ওয়েব ব্রাউজারে কাজ করে। SVG ফায়ারফক্সে ততটা নির্ভরযোগ্য নয়, কিন্তু অন্যান্য ব্রাউজারে ভালো কাজ করে।
ডিফল্টরূপে, কার্সারের "হট স্পট" ছবিটির উপরের-বাম কোণে সেট করা হবে। একটি ভিন্ন "হট স্পট" নির্দেশ করতে, আপনার কার্সার কলে একটি (X,Y) সমন্বয় জোড়া নির্দিষ্ট করুন৷ নীচের এই উদাহরণটি হট স্পটটিকে (3,3) হিসাবে সেট করবে, উপরের বামদিকে (0,0) হিসাবে ব্যবহার করে।
.cursor {cursor: url(cursor.svg) 3 3, pointer;} উপসংহার:এই বৈশিষ্ট্যগুলি ব্যবহার করা
আপনি যদি একটি ওয়েবসাইট তৈরি করেন, তাহলে আপনি বস্তুর উপর মাউস করার সময় ব্যবহারকারী যে কার্সারটি দেখেন তা পরিবর্তন করতে আপনি আপনার সাইটের যেকোনো বস্তুতে এই CSS বৈশিষ্ট্যগুলি যোগ করতে পারেন। আপনি যদি আরও দুঃসাহসিক হন তবে আপনি একটি ওয়েবসাইটের উপরে নির্বিচারে CSS চালানোর জন্য Stylus, TamperMonkey বা GreaseMonkey এর মতো একটি ব্রাউজার এক্সটেনশনও ব্যবহার করতে পারেন। এইভাবে, আপনি যখনই এবং যেখানে চান আপনার নিজস্ব কাস্টম কার্সার দেখাতে পারেন৷
৷