Feb 08

সি এস এস ইমেজ স্প্রাইটস্ (CSS Image Sprites)

মৃত্যুঞ্জয় বিশ্বাস

 

ইমেজ স্প্রাইটস্ কি?

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

 

ইমেজ স্প্রাইটস্ এর কিছু সহজ উদাহরণ

তিনটি পৃথক ইমেজ এর পরিবর্তে, আমরা এই একক চিত্র ব্যবহার করতে পারব (“img_navsprites.gif”) এর মাধমে:

CSS এর সঙ্গে, আমরা শুধু প্রয়োজনীয় ইমেজ প্রদর্শন করতে পারব।

নিম্নলিখিত উদাহরণে সিএসএস এর ” img_navsprites.gif ” ছবিটি কোন নির্দিষ্ট অংশ প্রদর্শন করে তা দেখব :
উদাহরণঃ

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

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

  • <img id=”home” src=”img_trans.gif”> – Src অ্যাট্রিবিউট খালি হতে পারে না, কারণ শুধুমাত্র একটি ছোট স্বচ্ছ ইমেজ সংজ্ঞায়িত করে। প্রদর্শিত ইমেজ এ CSS এর মধ্যে নির্দিষ্ট পটভূমি চিত্র হতে হবে।
  • width: 46px; height: 44px; – ইমেজ এর অংশ সংজ্ঞায়িত করার জন্য ব্যবহৃত করা হয়।
  • background: url(img_navsprites.gif) 0 0; – Defines the background image and its position (left 0px, top 0px) – ব্যাকগ্রাউন্ড ইমেজ এবং তার অবস্থান (বাম ০ 0px, শীর্ষ ০ 0px ) সংজ্ঞায়িত করার জন্য ব্যবহৃত হয়।

এটি হল ইমেজ স্প্রাইটস্ ব্যবহার করার সবচেয়ে সহজ উপায়। এখন আমরা এই প্রভাব ব্যবহার করে লিঙ্ক এবং কার্সার প্রসারিত করতে পারব।

 

ইমেজ স্প্রাইটস্ এর ন্যাভিগেশন তালিকা তৈরি

ইমেজ স্প্রাইটস্ ব্যবহার (“img_navsprites.gif”) করতে প্রথমে নেভিগেশন তালিকা তৈরি করতে হবে।

আমেদের একটি HTML তালিকা ব্যবহার করা হবে, কারণ এটি একটি লিঙ্ক এবং একটি ব্যাকগ্রাউন্ড ইমেজ সমর্থন করে।

উদাহরণঃ

#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 {position:relative;} – আপেক্ষিক অবস্থান সেট করা হয়, ভিতরে পরম অবস্থান অনুমতি করার জন্য।
  • #navlist li {margin:0;padding:0;list-style:none;position:absolute;top:0;} – তালিকা-স্টাইল মুছে ফেলা জন্য মার্জিন এবং প্যাডিং ০0 সেট করা হয় এবং সব তালিকার আইটেম নিশ্চিত করা হয়।
  • #navlist li, #navlist a {height:44px;display:block;} – সব ছবি উচ্চতা 44 44px হয়।

 

এখন প্রতিটি নির্দিষ্ট অংশ জন্য অবস্থান বর্ণনা করবো।

  • #home {left:0px;width:46px;} – বাম সব স্থান বাম পথ এ এবং ইমেজ প্রস্থ 44 46px হয়।
  • #home {background:url(img_navsprites.gif) 0 0;} – ব্যাকগ্রাউন্ড ইমেজ এবং তার অবস্থান (বাম ০ 0px, শীর্ষ ০ 0px ) সংজ্ঞায়িত করার জন্য ব্যবহৃত হয়।
  • #prev {left:63px;width:43px;} – ডানে 63px এবং প্রস্থ 43px স্থান হবে (#home width 46px + some extra space between items)।
  • #prev {background:url(‘img_navsprites.gif’) -47px 0;} – ডান ব্যাকগ্রাউন্ড ইমেজ 47px সংজ্ঞায়িত করার জন্য ব্যবহৃত হয় (#home width 46px + 1px line divider)
  • #next {left:129px;width:43px;}- ডানে 129px এবং প্রস্থ 43px স্থান হবে (start of #prev is 63px + #prev width 43px + extra space)
  • #next {background:url(‘img_navsprites.gif’) -91px 0;} – ডান ব্যাকগ্রাউন্ড ইমেজ 91px সংজ্ঞায়িত করার জন্য ব্যবহৃত হয় (#home width 46px + 1px line divider + #prev width 43px + 1px line divider )

 

ইমেজ স্প্রাইটস্ এ হভের (Hover) প্রভাব

এখন আমরা আমাদের নেভিগেশন তালিকায় একটি হভের (Hover) প্রভাব যোগ করবো। হভের নির্বাচক শুধুমাত্র লিঙ্ক না, সমস্ত উপাদান, ব্যবহার করা যেতে পারে।

আমাদের নতুন ইমেজ (” img_navsprites_hover.gif “) তিন নেভিগেশন ইমেজ এর উপস্থিত রয়েছে। কারণ এটি একটি একক চিত্র না বরঞ্চ ছয়টি পৃথক ফাইল। যখন কোন লোড দেরী হবে না, কারন ব্যবহারকারী ইমেজ উপর hovers থাকে।

আমরা এখন শুধুমাত্র হভের (Hover) প্রভাব এ তিন লাইন কোড যোগ করবো:

উদাহরণঃ

#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 {background: transparent url(‘img_navsprites_hover.gif’) 0 -45px;} – আমরা তিনটি সব হভার ইমেজ এ 45px এর নিচে একই পটভূমি অবস্থান উল্লেখ করেছি।