কুইক টিপ: কিভাবে সিএসএস দিয়ে কার্সরের চেহারা পাল্টে দিবেন

Bengali (বাংলা) translation by Bint Salim (you can also view the original English article)

এই কুইক টিপসে, আমরা জানবো কিভাবে সিএসএস দিয়ে কার্সরের চেহারা কাস্টমাইজ করতে হয়। আমরা আমাদের কার্সরটিকে একটি তীর চিহ্নে রুপান্তর করবো যাতে একটি স্লাইডশো সহজেই ন্যাভিগেট করা যায়। এটা আরও ভালোভাবে বুঝতে আমরা দুটি আলাদা উদাহরণ দেখবো।

দ্রষ্টব্য: এই রচনার লক্ষ্য cursor প্রপার্টির সিনট্যাক্স ব্যাখ্যা করা নয়। আরও ভালোভাবে পরীক্ষানিরীক্ষা করতে, এই টিউটোরিয়ালের শেষের রিসোর্সগুলো চেক করুন।

উদাহরণ #১

প্রথম উদাহরণে, আমরা মাউসের পজিশনের উপর নির্ভর করে কিভাবে কার্সরের ইমেজ পরিবর্তন করতে হয়, তা নিয়ে আলোচনা করবো।

আমরা হাতে-কলমে নিচের ডেমোটি তৈরি করবো:

১। এইচটিএমএল

আমরা একটি সাধারণ ইমেজ দিয়ে শুরু করবো:

<img src="IMG_SRC" alt="">

২। সিএসএস

তারপর, আমরা আরও দুটি সিএসএস ক্লাস সংজ্ঞায়িত করবো যা কার্সর ইমেজটিকে ধারন করবে:

.cursor-prev {
  cursor: url(cursor-prev.cur), auto; /*IE & Edge*/
  cursor: url(cursor-prev.svg) 16 16, auto; /*Rest browsers*/
}

.cursor-next {
  cursor: url(cursor-next.cur), auto; /*IE & Edge*/
  cursor: url(cursor-next.svg) 16 16, auto; /*Rest browsers*/
}

লক্ষ্য করুন, আমরা প্রত্যেকটি রুলের জন্য দুটি কার্সর ডিক্লেরেশন নির্ধারণ করেছি। প্রতিটি রুলের প্রথম ডিক্লেরেশন দিয়ে মাইক্রোসফট ব্রাউজারসমুহকে টার্গেট করা হয়েছে, এবং দ্বিতীয়টি দিয়ে অন্যান্য ব্রাউজারগুলোকে টার্গেট করা হয়েছে। এই মানগুলো একটি ইমেজের দিকে লক্ষ্য করেই বসানো হয়েছে, যাতে ফলব্যাক হিসেবে auto কীওয়ার্ড মান ব্যবহার করা হয়েছে।

এখানে উল্লেখ্য যে, আমরা একের অধিক কাস্টম ইউআরএল অথবা ইমেজ ব্যবহার করতে পারি। মানের ভিত্তিতে নির্ধারিত অর্ডারের উপর ভিত্তি করে ব্রাউজার এটাকে লোড করবে। অন্য কথায়, এটা প্রাথমিকভাবে প্রথম ইমেজটি লোড করতে চেষ্টা করবো। যদি এই ইমেজটি কোনও কারণে উপলভ্য না হয়, তাহলে এটা দ্বিতীয় ইমেজটি লোড করার চেষ্টা করবে। পরিশেষে, যদি কোনও ইমেজই বাকি না থাকে, তাহলে ফলব্যাক কীওয়ার্ড ব্যবহৃত হবে।

আরও অগ্রসর হওয়ার আগে, চলুন কিছু সীমাবদ্ধতা তুলে ধরা যাক (আমার পরীক্ষা অনুসারে) এবং ব্যাখ্যা করা যাক যে কেন আমরা দুটি আলাদা ডিক্লেরেশন সেট করেছি:

মাইক্রোসফটের ব্রাউজারসমুহ ফরম্যাট হিসেবে কেবল CUR এবং ANI সাপোর্ট করবে।
মাইক্রোসফট ব্রাউজার কার্সর ইমেজের চিত্র পরিবর্তনের অনুমতি দেয় না। যদি এটা ঘটে তাহলে কার্সর ইমেজ এবং অন্যান্য প্রোপার্টি উপেক্ষিত হবে। আমাদের ক্ষেত্রে নন-মাইক্রোসফট ব্রাউজারের ক্ষেত্রে আমরা কেন্দ্রের (images are 32x32) কাছাকাছি ছবিটির উৎপত্তি নির্ধারণ করেছি।

৩। জাভাস্ক্রিপ্ট

যখন সমস্ত পেইজ এসেটগুলো প্রস্তুত হয়ে যাবে, তখন init ফাংশনটি কার্যকর হবে।

এই ফাংশন দিয়ে আমরা প্রথমে ছবির প্রস্থ পুনরুদ্ধার করবো।

পরবর্তীতে যতবার আমরা কোনও ছবির উপর হোভার করবো, ততবার নিন্মলিখিত বিষয়গুলো করবো:

ইমেজের সাথে সংশ্লিষ্ট মাউস পয়েন্টারের X স্থানাঙ্ক নিন—ব্রাউজার উইন্ডোর সাথে সংশ্লিষ্ট কোনও কিছু নয়।
ইমেজ থেকে সমস্ত ক্লাস মুছে ফেলুন।
মাউস পজিশনের উপর নির্ভর করে সঠিক ইমেজ ক্লাস যুক্ত করুন। যদি মাউসের অবস্থান ইমেজের প্রস্থের অর্ধাংশ অতিক্রম করে যায়, আমরা cursor-next ক্লাস করবো, অন্যথায় cursor-prev ক্লাস যুক্ত হবে।

কোডটি নিচের সমস্ত প্রতিক্রিয়ার জন্য দায়ী:

window.addEventListener("load", init);

function init() {
  const img = document.querySelector("img");
  const {width} = img.getBoundingClientRect();
  const halfImgWidth = width / 2;

  img.addEventListener("mousemove", function(e) {
    const xPos = e.pageX - img.offsetLeft;
    this.classList.remove("cursor-prev", "cursor-next");
    if (xPos > halfImgWidth) {
      this.classList.add("cursor-next");
    } else {
      this.classList.add("cursor-prev");
    }
  });
}

উদাহরণ #২

দ্বিতীয় উদাহরণে, আমরা আগের পোস্টে তৈরি করা ডেমোটি ব্যবহার করবো। চলুন দেখা যাক:

এখানে, আমাদের ন্যাভিগেশন অ্যারো এর অবস্থান এবং চেহারা এমন হবে:

The default appearance of the navigation arrows

চলুন, এবার সহজে ন্যাভিগেশনের জন্য এগুলো কাস্টমাইজ করি। প্রতিটি তীর চিহ্ন ক্যারোসেলের প্রস্থের অর্ধাংশ কভার করবে, এবং তার উচ্চতা হবে ক্যারসেলের উচ্চতার অনুরূপ। একই সাথে, আমরা তীর চিহ্নের আইকন সেট করার জন্য cursor প্রপার্টির সুবিধা নিবো।

The new appearance of the navigation arrows

এখানে প্রয়োজনীয় CSS টি দেয়া হলো:

.owl-carousel .owl-nav [class*=owl-] {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  margin: 0;
}

.owl-carousel .owl-nav .owl-prev {
  left: 0;
  cursor: url(cursor-prev.cur), move;
  cursor: url(cursor-prev.svg) 16 16, move;
}

.owl-carousel .owl-nav .owl-next {
  right: 0;
  cursor: url(cursor-next.cur), move;
  cursor: url(cursor-next.svg) 16 16, move;
}

.owl-carousel .owl-nav svg {
  display: none;
}

খেয়াল করুন, কার্সরের উদাহরণটি আমাদের আগের ইমেজ থেকে নেয়া হয়েছে। একমাত্র পার্থক্য হচ্ছে যদি সংশ্লিষ্ট ইমেজটি লোড না হয় তবে আমরা ফলব্যাক হিসেবে move কীওয়ার্ডটির মান ব্যবহার করেছি।

এখানে ফলাফল দেয়া হলো:

আপনার চ্যালেঞ্জ (আপনি কি এটা গ্রহণ করবেন)

এই টেকনিকটি আমাদের উদাহরনের সাথে কেবল একটি বিষয় বাদে খুব ভালভাবেই কাজ করে। ন্যাভিগেশনের তীর চিহ্নটি স্লাইড টেক্সটের উপরে আটকে যায়, এর ফলে কল-টু-অ্যাকশন বাটনে ক্লিক করতে বাধার সম্মুখীন হতে হয়।

সাধারনভাবে, এর সহজ সমাধান হচ্ছে এই টেক্সটের সাথে ধনাত্মক z-index ব্যবহার করা (এবং এটার position: relative হিসেবে সেট করা)। তারপরও এই সমাধানটি কাজ নাও করতে পারে, কারণ টেক্সট এবং তীর চিহ্নটি ভিন্ন ভিন্ন স্ট্যাকিং কন্টেক্সটে হতে পারে (ব্রাউজার ইনস্পেক্টর ব্যবহার করে এটা দেখতে পারেন)।

সিএসএস

Z-Index প্রপার্টি সম্পর্কে যেসব বিষয় আপনি হয়তোবা জানেন না

স্টিভেন ব্রাডলি

আবারও বলছি, এই সমস্যাগুলো আমাদের ডেমোর ক্ষেত্রে হয়েছে। আপনার প্রজেক্টের ক্ষেত্রে আপনার স্ট্রাকচারটি আলাদা হতে পারে (যেমন, শুধু একটিমাত্র ইমেজ অথবা ইমেজের নিচে টেক্সট) এবং তাহলে হয়তোবা আপনি এই সমস্যার সম্মুখীন হবেন না। এছাড়াও, আপনি হয়তোবা ভিন্ন ধরণের মার্কআপের সঙ্গে ভিন্ন ধরণের ক্যারোসেল ব্যবহার করতে পারেন।

যেকোনো ক্ষেত্রে, এই সমস্যাটি জাভাস্ক্রিপ্ট দ্বারা সমাধান করা যায়। তাই প্রত্যেকবার কাস্টম কার্সরটি টার্গেট বাটন/টেক্সটের নিয়ে গেলে, সংশ্লিষ্ট তীরচিহ্নটি ঋণাত্মক z-index গ্রহণ করে অথবা অদৃশ্য হয়ে যায়।

এই সমস্যাটি নিজে নিজে সমাধান করে নিচের কমেন্টে আমাদেরকে তা জানাতে পারেন!

উপসংহার

আমরা দেখলাম, যে এই কাজটি বেশ চ্যালেঞ্জিং যদিও সব ধরণের ব্রাউজার একই সিনট্যাক্স সাপোর্ট করবে না, কিন্তু কার্সরের সাথে কিছু স্টাইল যুক্ত করে, আমরা ইউজার এক্সপেরিয়েন্স আরও উন্নত করতে সমর্থ হয়েছি।