সিএসএস ইমেজ স্প্রাইট(Sprite)
ইমেজ স্প্রাইট(Sprite)
ইমেজ স্প্রাইট(Sprite) হলো একটি ছবির মধ্যে একগুচ্ছ ছবি সংগ্রহ করে রাখা।
অসংখ্য ছবি যুক্ত একটি ওয়েবপেজ লোড হতে অনেক সময় নিতে পারে এবং অসংখ্য সার্ভার রিকুয়েস্ট তৈরি করতে পারে।
ইমেজ স্প্রাইটের (Sprite) ব্যবহার সার্ভার রিকুয়েস্টের সংখ্যা কমিয়ে আনে এবং ব্যান্ডউইথ বাচিয়ে দেয়।
ইমেজ স্প্রাইট(Sprite) - সাধারণ উদাহরণ
তিনটি আলাদা ছবি ব্যবহার করার চেয়ে আমরা একটি ছবিতে তিনটি ছবি ব্যবহার করতে পারঃ("icon.gif")
সিএসএস এর সাহায্যে আমরা একটি ছবির যতটুকু প্রদর্শন করে দেখানোর দরকার ততটুকুই দেখাতে পারি।
নিচের উদাহরণে, "icon.gif" ইমেজের কোন অংশটুকু প্রদর্শিত হবে তা সিএসএস দিয়ে নির্ধারণ করে দেয়া হয়েছেঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>image sprite</title>
<style>
#homepage {
width: 46px;
height: 44px;
background: url(..//css_examples/icon.gif) 0 0;
}
#nextpage {
width: 43px;
height: 44px;
background: url(..//css_examples/icon.gif) -91px 0;
}
</style>
</head>
<body>
<img id="homepage" src="..//css_examples/icondot.gif"><br><br>
<img id="nextpage" src="..//css_examples/icondot.gif">
</body>
</html>
ফলাফল
উদাহরণের ব্যাখ্যা
<img id="" src="icondot.gif">- একটি ছোট ট্রান্সপারেন্ট ইমেজকে নির্দেশ করে কারণ src এট্রিবিউট খালি রাখা যায় না। সিএসএসের মাধ্যমে নির্ধারিত ইমেজটি ব্যাকগ্রাউন্ড ইমেজ হিসাবে প্রদর্শিত হবে।width: 46px; height: 44px;- ইমেজের যে অংশটি আমরা ব্যবহার করতে চাই সেই অংশটিকে নির্দিষ্ট করে।background: url(icon.gif) 0 0;- ব্যাকগ্রাউন্ড ইমেজ এবং এর অবস্থান নির্ধারণ করে ( এখানে left এর ভ্যালু 0px এবং top এর ভ্যালু 0px )।
ইমেজ স্প্রাইট(Sprite) ব্যবহারের এটাই সবচেয়ে সহজ উপায়। নিচে আমরা স্প্রাইট ইমেজে লিঙ্ক ও হোভার ইফেক্টের ব্যবহার দেখাবোঃ
ইমেজ স্প্রাইট(Sprite) এর মাধ্যমে নেভিগেশন লিস্ট তৈরি
নেভিগেশন লিস্ট তৈরির জন্য আমরা "icon.gif" স্প্রাইট(Sprite) ইমেজটি ব্যবহার করবো।
আমরা এখানে এইচটিএমএল লিস্ট ব্যবহার করবো, কারণ ইহা একই সাথে লিংক ও ব্যাকগ্রাউন্ড ইমেজ সাপোর্ট করে
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<style>
#listitem {
position: relative;
}
#listitem li {
margin: 0;
padding: 0;
list-style: none;
position: absolute;
top: 0;
}
#listitem li, #listitem a {
height: 44px;
display: block;
}
#homepage {
left: 0px;
width: 46px;
background: url('..//css_examples/icon.gif') 0 0;
}
#backpage {
left: 63px;
width: 43px;
background: url('..//css_examples/icon.gif') -48px 0;
}
#nextpage {
left: 129px;
width: 43px;
background: url('..//css_examples/icon.gif') -92px 0;
}
</style>
</head>
<body>
<ul id="listitem">
<li id="homepage"><a href="www.sattacademy.com"></a></li>
<li id="backpage"><a href="www.sattacademy.com/css"></a></li>
<li id="nextpage"><a href="www.sattacademy.com/html"></a></li>
</ul>
</body>
</html>
ফলাফল
উদাহরণের ব্যাখ্যা
- #listitem {position:relative;} - এর মধ্যে Absolute পজিশন সাপোর্ট করানোর জন্য পজিশন এর ভ্যালু Relative সেট করা হয়েছে।
- #listitem li {margin:0;padding:0;list-style:none;position:absolute;top:0;} - দ্বারা মার্জিন ও প্যাডিং "0" সেট করা হয়েছে, লিস্ট স্টাইল বাদ দেওয়া হয়েছে, এবং সকল লিস্ট আইটেমের পজিশন Absolute করা হয়েছে।
- #listitem li, #listitem a {height:44px;display:block;} - দ্বারা সকল ইমেজের উচ্চতা ৪৪px সেট করা হয়েছে।
তারপরে ইমেজের প্রত্যেক অংশের জন্য অবস্থান এবং স্টাইল সেট করা হয়েছেঃ
- # {left:0px; width:46px;} - সবার বামে নিয়ে আসে এবং ইমেজের প্রস্থ 46px সেট করে।
- # {background:url(icon.gif) 0 0;} - ব্যাকগ্রাউন্ড ইমেজ এবং এর অবস্থান নির্দেশ করে।(left এ 0px এবং top এ 0px)
- #backpage {left:63px; width:43px;} - 63px ডানদিকে অবস্থান করে (# এর প্রস্থ 46px + আইটেমগুলোর মাঝের অতিরিক্ত ফাকা অংশ), এবং 43px প্রস্থ।
- #backpage {background:url('icon.gif') -47px 0;} - ব্যাকগ্রাউন্ড ইমেজটি 47px ডানে থাকবে (# এর প্রস্থ 46px + 1px লাইন ডিভাইডার)
- #nextpage {left:129px;width:43px;}- 129px ডানে অবস্থান করে(#backpage এর শুরু 63px + #backpage এর প্রস্থ 43px + অতিরিক্ত জায়গা), এবং এর প্রস্থ হবে 43px।
- #nextpage {background:url('icon.gif') -91px 0;} - ব্যাকগ্রাউন্ড ইমেজ 91px ডানে থাকবে (# এর প্রস্থ 46px + 1px লাইন ডিভাইডার + #backpage এর প্রস্থ 43px + 1px লাইন ডিভাইডার)
ইমেজ স্প্রাইট(Sprite) - হোভার ইফেক্ট
এখন আমরা নেভিগেশন লিস্টে হোভার ইফেক্ট যোগ করবো।
টিপসঃ :hover সিলেক্টরটি শুধুমাত্র লিংকে নয়, বরং সকল এলিমেন্টেই ব্যবহার করা যায়।
আমাদের নতুন ইমেজটিতে ("iconbg.gif")নেভিগেশনের জন্য তিনটি ইমেজ রয়েছে এবং তিনটি ইমেজ রয়েছে হোভার ইফেক্টের জন্য।
ইহা একটি সিংগেল ইমেজ অর্থাৎ ছয়টি আলাদা ইমেজ না হওয়ায় ব্যবহারকারী যখন ইমেজের উপর হোভার করবে তখন লোডিংয়ের জন্য সময় নষ্ট হবে না,
হোভার ইফেক্ট যুক্ত করার জন্য আমরা শুধুমাত্র তিন লাইনের কোড যোগ করেছিঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
#listitem {
position: relative;
}
#listitem li {
margin: 0;
padding: 0;
list-style: none;
position: absolute;
top: 0;
}
#listitem li, #listitem a {
height: 44px;
display: block;
}
#homepage {
left: 0px;
width: 46px;
background: url('..//css_examples/icon.gif') 0 0;
}
#backpage {
left: 63px;
width: 43px;
background: url('..//css_examples/iconbg.gif') -47px 0;
}
#nextpage {
left: 129px;
width: 43px;
background: url('..//css_examples/iconbg.gif.gif') -91px 0;
}
#homepage a:hover {
background: url('..//css_examples/iconbg.gif.gif') 0 -45px;
}
# a:hover {
background: url('..//css_examples/iconbg.gif') -47px -45px;
}
#nextpage a:hover {
background: url('..//css_examples/iconbg.gif') -91px -45px;
}
</style>
</head>
<body>
<ul id="listitem">
<li id="homepage"><a href="www.sattacademy.com"></a></li>
<li id="backpage"><a href="www.sattacademy.com/css"></a></li>
<li id="nextpage"><a href="www.sattacademy.com/html"></a></li>
</ul>
</body>
</html>
ফলাফল
উদাহরণের ব্যাখ্যাঃ
- # a:hover {background: transparent url('iconbg.gif') 0 -45px;} - তিনটি হোভার ইমেজের জন্য আমরা একই ব্যাকগ্রাউন্ড পজিশন সেট করেছি, শুধুমাত্র 45px আরো নিচে।