X

X

X

CSS Image Sprites


Image Sprites

image sprite হচ্ছে এক বা একাধিক ইমেজকে একটি একক ইমেজ বা ছবি হিসেবে উপস্থাপন করা। কোনো ওয়েব পেজে অনেকগুলো ইমেজ থাকার অর্থ হচ্ছে অনেকগুলো http Request. যখন অনেকগুলো রিকোয়েস্ট হয়, তখন সার্ভারের উপর চাপ পড়ে, একই সাথে পেজটি পুরোপুরি লোড হতেও অনেক সময় লাগে। এক্ষেত্রে সঠিক সমাধান হচ্ছে, সব ছবিকে একটি ছবিতে লোড করে, তার বিভিন্ন খন্ডাংশকে আলাদা আলাদাভাবে উপস্থাপণ করা।

এর ফলে সার্ভারের উপর চাপ কমবে এবং ব্যান্ডওইডথ কম খরচ হবে।


Image Sprites – সাধারণ উদাহরণ

তিনটি আলাদা আলাদা ইমেজ ব্যবহার না করে এখানে একটি ইমেজ ব্যবহার করা হয়েছে। (“img_navsprites.gif”):

navigation images

সিএসএস ব্যবহার করে ইমেজটির যখন যেটুকু প্রয়োজন হবে, তখন শুধুমাত্র ঐটুকু অংশ ব্যবহার করা যায়।

নিচের উদাহরণে “img_navsprites.gif” ইমেজের একটি নির্দিষ্ট অংশ উপস্থাপণ করে দেখানো হলো:

Code Example

#home {
    width: 46px;
    height: 44px;
    background: url(img_navsprites.gif) 0 0;
}

#next {
    width: 43px;
    height: 44px;
    background: url(img_navsprites.gif) -91px 0;
}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

উদাহরণের ব্যাখ্যা:

  • <img id="home" src="img_trans.gif"> – একটি ছোটো স্বচ্ছ ইমেজ ব্যবহার করা হয়েছে। কারণ src attribute এর মান ফাঁকা রাখা যাবে না। সংযুক্ত ইমেজটি ব্যাকগ্রাউন্ড ইমেজ হিসেবে ব্যবহৃত হবে।
  • width: 46px; height: 44px; – ইমেজেটি যে অংশটুকু আমরা উপস্থাপণ করতে চাই, সেটি ব্যবহৃত হবে।
  • background: url(img_navsprites.gif) 0 0; – ব্যাকগ্রাউন্ড ইমেজ সেট এবং এর অবস্থান (left 0px, top 0px) সেট করা হচ্ছে।

এটিই হচ্ছে ইমেজ স্প্রাইট ব্যবহার করার সহজ পদ্ধতি। এখন আমরা এটিকে লিংকে ব্যবহার করবো এবং এতে হোভার ইফেক্ট যুক্ত করবো।


Image Sprite দিয়ে নেভিগেশন লিংক তৈরি

এখানে একটি HTML list ব্যবহার করা হবে, কারণ এটি লিংক ও ব্যাকগ্রাউন্ড ইমেজ সাপোর্ট করে।

Code Example

#navlist {
    position: relative;
}

#navlist li {
    margin: 0;
    padding: 0;
    list-style: none;
    position: absolute;
    top: 0;
}

#navlist li, #navlist a {
    height: 44px;
    display: block;
}

#home {
    left: 0px;
    width: 46px;
    background: url('img_navsprites.gif') 0 0;
}

#prev {
    left: 63px;
    width: 43px;
    background: url('img_navsprites.gif') -47px 0;
}

#next {
    left: 129px;
    width: 43px;
    background: url('img_navsprites.gif') -91px 0;
}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

উদাহরণের ব্যাখ্যা:

  • #navlist – এর অবস্থান relative যাতে এর ভেতরে কোনো ইলামেন্টকের position absolute করা যায়।
  • #navlist li – margin ও padding এর মান 0 সেট করা হয়েছে, list-style কে বাদ দেওয়া হয়েছে, এবং সব list item কে absolute position বিশিষ্ট করা হয়েছে।
  • #navlist li, #navlist a – সব ইমেজের উচ্চতা 44px সেট করা হয়েছে

এখন প্রতিটি ইমেজকে মূল ইমেজ থেকে খন্ডাকারে সঠিক জায়গায় উপস্থাপণ করা হবে।

  • #home – Position এর মান left, এবং এর প্রস্থ 46px করা হলো।
  • #home – এর ব্যাকগ্রাউন্ড ইমেজ ও এর position (left 0px, top 0px) সেট করা হলো
  • #prev – ডানদিকে 63px দূরত্বে উপস্থাপণ করা হলো (#home width 46px + আইটেমের মধ্যে কিছু দূরত্ব), এবং এর প্রস্থ হচ্ছে 43px ।
  • #prev – ডানদিকে ব্যাকগ্রাউন্ড ইমেজের অবস্থান 47px সেট করা হয়েছে (#home width 46px + 1px line divider) ।
  • #next – ডানদিকে 129px এ উপস্থাপণ করা হয়েছে ( #prev এর প্রারম্ভিক অবস্থান 63px + #prev এর প্রস্থ 43px + অতিরিক্ত কিছু ফাঁকা জায়গা), এবং প্রস্থের মান 43px
  • #next – ডানদিকে ব্যাকগ্রাউন্ড ইমেজের অবস্থান 91px সেট করা হয়েছে (#home width 46px + 1px line divider + #prev width 43px + 1px line divider )

Image Sprites – Hover Effect

এখন নেভিগেশন লিস্টে কিছু হোভার ইফেক্ট যুক্ত করা হবে।

টিপস: :hover selector শুধুমাত্র লিংক নয়, বরং যেকোনো ইলামেন্টের জন্য ব্যবহার করা যাবে।

আমাদের নতুন ছবিতে (“img_navsprites_hover.gif”) তিনটি নেভিগেশন ছবি রয়েছে এবং হোভার ইফেক্টের জন্য আরও তিনটি ইমেজ ব্যবহার করা হবে।

navigation images

যেহেতু ছবিটি একটি একক ছবি, কাজেই যখন এটিতে মাউস হোভার করা হবে, এটি কোনো সময় নষ্ট না করে সরাসরি লোড হবে। শুধুমাত্র আর তিনটি লাইন কোড লিখেই হোভার ইফেক্ট যুক্ত করা যায়:

Code Example

#home a:hover {
    background: url('img_navsprites_hover.gif') 0 -45px;
}

#prev a:hover {
    background: url('img_navsprites_hover.gif') -47px -45px;
}

#next a:hover {
    background: url('img_navsprites_hover.gif') -91px -45px;
}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

উদাহরণের ব্যাখ্যা:

  • #home a:hover – সব হোভার ইমেজের ব্যাকগ্রাউন্ড পজিশন একই করা হয়েছে , শুধুমাত্র নিচের দিকে 45px অতিরিক্ত নামানো হয়েছে।