প্রায় সকল ওয়েব সাইটেই ছবি বা image ব্যাবহৃত হয়। এমনকি কিছু কিছু ওয়েব সাইটের আকর্ষণীয় ডিজাইন ওয়েবসাইট এর বিভিন্ন স্থানে বিভিন্ন ছবির ওপর নির্ভর করে তৈরি হয়।
কোন ওয়েব সাইটে অনেকগুলো ছবি বা image ভিন্ন ভিন্ন ভাবে ব্যবহার না করে ছবি গুলো মিলিয়ে একটি বড় ছবি তৈরি করে তা থেকে প্রয়োজনীয় অংশ ব্যবহার করাই হল Image Sprite. অর্থাৎ একটি বড় ছবির শুধুমাত্র প্রয়োজনীয় অংশগুলো ব্যবহার করার পদ্ধতিই হল Image Sprite.
নিচের ছবি দুটি দেখুন। এখানে প্রথম ছবিটি হল বিভিন্ন ছবি মিলিয়ে তৈরি করা একটি বড় ছবি, দ্বিতীয় ছবিটি হল প্রথম ছবি থেকে Image Sprit এর ব্যবহার করে তৈরি করা। ওপরের ছবি বা image টি থেকে আমরা Image Sprite এর মাধ্যমে নিচের অংশটুকু ব্যবহার করেছি।
কোন ওয়েব সাইটে অনেক বেশী ছবি বা image ব্যবহার করলে সার্ভার রিকোয়েস্ট এর সংখ্যা বেড়ে যায়, যা কোন ভাবেই কাম্য নয়। আবার বেশি ছবি বা image ব্যবহার করলে বেশি ব্যান্ডওয়াইডথ খরচ হয়, যা ভাল ইঙ্গিত না। কোন ওয়েব পেজে বেশি ছবি বা image ব্যবহার করলে, আবার ওয়েব পেজের আকার বড় হয়ে যাওয়ার দরুন ওয়েব পেজের loading time বেরে যায়, সার্চ ইঙ্গিন অপটিমাইজেসন বা SEO এর ক্ষেত্রে এটি একটি বিবেচ্ছ বিষয়।
তাই সার্ভার রিকোয়েস্ট এর সংখ্যা কমানো, ব্যান্ডওয়াইডথ বাঁচানো এবং ওয়েব পেজের loading time কমানোর জন্য সিএসএস এর Image Sprite ব্যবহার করা হয়। Image Sprite ব্যবহার করে সার্ভার রিকোয়েস্ট এর সংখ্যা কমানো যায় এবং উল্লেখযোগ্য পরিমানে ব্যান্ডওয়াইডথ বাঁচান যায়।
সিএসএস এর Image Sprite ব্যবহার করে আমরা কোন একটি বড় ছবি বা image এর শুধুমাত্র প্রয়োজনীয় অংশটুকুই ব্যবহার করতে পারি।
নিচে কিছু সিএসএস স্টাইল কোড দেখুন, এখানে ৩ টি ভিন্ন ভিন্ন ছবি বা image ব্যবহার করার পরিবর্তে আমরা demo.gif নামে একটি ছবি ব্যবহার করেছি। demo.gif নামে ছবিটির কোন অংশ ওয়েব পেজে প্রদর্শিত হবে তা নির্ধারণ করতে নীচের সিএসএস স্টাইল কোড গুলো দেখুন।
<style>
img.window {
width: 50px;
height: 48px;
background: url(demo.gif) 0 0;
}
</style>
<img class="window" src="transparent.gif"/>
<img class="window" src="trns.gif"/> -
src এট্রিবিউটের মান খালি হতে পারে না তাই এখানে ছোট একটি transparent image
নির্ধারণ করা হয়েছে।
width: 50px; এবং height: 48px; -
আমারা যে ছবি বা image টি ব্যবহার করেছি তার প্রয়োজনীয় আকার নির্ধারণ করতে সিএসএস এর
width এবং height প্রপার্টি ব্যবহার করা হয়েছে।
background:url(demo.gif) 0 0; -
পৃষ্ঠদেশে বা background এ ছবিটির ঠিকানা বা address অর্থাৎ file path এবং ছবিটির অবস্থান অর্থাৎ প্রয়োজনীয় অংশটুকু নির্ধারণ
নির্ধারণ করার জন্য সিএসএস এর background প্রোপার্টি ব্যবহার করা হয়েছে।
এখানে url এর মাধ্যমে ছবিটির লোকেশন এবং বাম দিকে 0px এবং ওপরের দিকে 0px এর মাধ্যমে অবস্থান নির্ধারণ করা হয়েছে।
সিএসএস এর Image Sprite পদ্ধতি ব্যবহার করে ন্যাভিগেশন বার তৈরি করা যায়। একটি ন্যাভিগেশন বার তৈরি করার জন্য আমাদের এইচটিএমএল লিস্ট এলিমেন্ট অর্থাৎ <ul> ও <li> ট্যাগ ব্যবহার করতে হবে কারন এগুলো হল কতগুলো লিংক এবং এগুলো backgroung image সমর্থন বা support করে। এর সাথে আমরা " nav.gif " নামে একটি Sprite image ব্যবহার করেছি।
নিচে এর জন্য সিএসএস স্টাইল কোড গুলো দেখুন।
#demo {
position:relative;
}
#demo li {
margin:0;
padding:0;
list-style:none;
position:absolute;
top:0;
}
#demo li, #demo a {
height:44px;
display:block;
}
#home {
left: 0px;
width: 46px;
}
#home {
background:url('nav.gif') 0 0;
}
#prev {
left:63px;
width:43px;
}
#prev {
background:url('nav.gif') -47px 0;
}
#next {
left:129px;
width:43px;
}
#next {
background:url('nav.gif') -91px 0;
}
#demo{position:relative;} -
এখানে সিএসএস এর position প্রপার্টির ব্যবহার করে তার মান relative নির্ধারণ করা হয়েছে
যাতে এর মাঝে absolute পজিসন নির্ধারণ করা যায়।
#demo li{margin:0;padding:0;list-style:none;position:absolute;top:0;} -
এখানে
margin ও padding প্রোপার্টি ব্যবহার করে এর
মান 0px নির্ধারণ করা হয়েছে, লিস্ট স্টাইল সরিয়ে বা remove করার জন্য সিএসএস এর
list-style প্রোপার্টি ব্যবহার করা হয়েছে এবং সকল লিস্ট আইটেমের অবস্থান বা position নির্ধারণ করা
position: absolute ব্যবহার করা হয়েছে।
#demo li, #demo a{height:45px;display:block;} -
সিএসএস এর height প্রোপার্টি বাবহজার করে সব গুলো ছবির উচ্ছতা নির্ধারণ করা হয়েছে 45px.
এখন প্রতিটি নির্দিষ্ট অংশের জন্য স্টাইল এবং অবস্থান নির্ধারণ করব -
#home{left:0px;width:46px;} -
সিএসএস এর left ও width প্রোপার্টি ব্যবহার
করে যে কোন অবস্থাতেই অবস্থান বা position নির্ধারণ করা হয়েছে বাম দিকে এবং width নির্ধারণ করা হয়েছে 46px.
#home{background:url(nav.gif) 0 0;} -
সিএসএস এর প্রোপার্টি ব্যবহার করে পৃষ্ঠদেশে বা background এ ছবিটির ঠিকানা বা
address অর্থাৎ file path এবং ছবিটির অবস্থান অর্থাৎ প্রয়োজনীয় অংশটুকু নির্ধারণ করা হয়েছে।
#prev{left:63px;width:43px;} -
left ও width প্রোপার্টি ব্যবহার করে
বাম দিক থেকে 63px দূরে অবস্থান এবং প্রস্থ বা width নির্ধারণ করা হয়েছে 43px.
#prev{background:url('nav.gif') -47px 0;} -
সিএসএস এর background প্রোপার্টি ব্যবহার করে বাম দিক থেকে 47px
দূরে background image নির্ধারণ করা হয়েছে।
#next{left:129px;width:43px;} -
এখানে সিএসএস এর left ও width প্রপার্টি
ব্যবহার করে বা দিক থেকে 129px দূরে অবস্থান এবং width নির্ধারণ করা হয়েছে 43px.
#next{background:url('nav.gif') no-repeat -91px 0;} -
এখানে background প্রোপার্টি ব্যবহার করে ডান দিক থেকে 91px দূরে
background image নির্ধারণ করা হয়েছে অর্থাৎ #home width 46px + 1px line divider + #prev width 43px +
1px line divider
এখন আমরা এই ন্যাভিগেশন বারে hover effect সংযুক্ত করার জন্য " nav_hover.gif " নামে একটি ছবি ব্যবহার করেছি। এই ছবিটিতে মোট ৬ টি ছবি আছে, ৩ টি নেভিগেসন এবং ৩ টি hover effect এর জন্য।
এটি পুরো একটি ছবি, ৬ টি ভিন্ন ছবি নয়। এর ফলে mouse hover এর সময় কোন দেরি বা delay হবে না। hover effect এর জন্য নীচের সিএসএস স্টাইল কোড গুলো ব্যবহার করতে হবে।
#home a:hover{background: url('nav_hover.gif') 0 -45px;}
#prev a:hover{background: url('nav_hover.gif') -47px -45px;}
#next a:hover{background: url('nav_hover.gif') -91px -45px;}
#home a:hover{background: transparent url(nav_hover.gif) 0 -45px;} -
background প্রোপার্টি ব্যবহার করে সবগুলো hover image এর জন্য আমরা একই
অবস্থান বা position এর background image নির্ধারণ করেছি, মাত্র 45px.
শেয়ার করুন
