ইমেজ স্প্রাইটস্ করার কৌশল

ইমেজ ইমেজ স্প্রাইটস কৌশল টি ব্যবহারের জন্য কোন একটি HTML ইলিমেন্ট যেমন <div> <li> <p> এর ব্যাকগ্রাউন্ড ইমেজ হিসেবে এমন একটি সিঙ্গেল ইমেজ ব্যবহার করতে হবে যেখানে একটা পেজের মোটামটি সকল ইমেজ একটু দূরত্ব রেখে অবস্থান করবে। যেমন, এখান থেকে ইমেজটি ডাউনলোড করে দেখুন। আইকন হিসেবে ব্যবহার করার জন্য সিঙ্গেল ইমেজের ব্যাকগ্রাউন্ড না থাকলে ভাল হয় এবং .png ফরমেটের ইমেজ হলে ভাল হয়।ধরে নেয়া যাক চারটি আইকন এর সমন্বয়ে একটা সিঙ্গেল ইমেজ তৈরি করা হল। এখন এগুলোকে আলাদা আলাদা ভাবে পর্যাক্রমে প্রদর্শন করতে হবে। এজন্য HTML ইলিমেন্ট হিসেবে আন অর্ডার লিস্ট ব্যবহার করা যেতে পারে। যেমন <ul id="nav"><li id="s1"></li><li id="s2"></li><li id="s3"></li><li id="s4"></li></ul> ।

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

<html>
<head>
<title> Gallery</title>
<style>
body{background:#FC9}
#nav li{list-style:none;}
li#s1
{ width:130px; height:130px;
background:url('f1.png') 0 0 ;}
li#s2
{ width:130px; height:130px;
background:url('f1.png') -130px 0;}
li#s3
{ width:130px; height:118px;
background:url('f1.png') -30px -130px ;}
li#s4
{ width:130px; height:115px;
background:url('f1.png') -160px -130px;}
</style>
</head>
<body>
<h2>Full single image.</h2>
<img src="f1.png">
<h2>Sprites image.</h2>
<ul id="nav">
<li id="s1"></li>
<li id="s2"></li>
<li id="s3"></li>
<li id="s4"></li>
</ul>
</body>
</html>

উপরের প্রজেক্টটি তৈরি করার জন্য sprites নামে একটা ফোল্ডার তৈরি করতে হবে । ফোল্ডারটির মধ্যে f1.png ইমেজটি রাখতে হবে। f1.png ইমেজটি এখান থেকে ডাউনলোড করুন। sprites নামে তৈরিকৃত ফোল্ডারের মধ্যেই একটা নোটপ্যাড open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করে File name: index.html , Save as type : All files, দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে নিচে প্রদর্শিত ছবির মত দেখাবে।

সম্পূর্ণ প্রজেক্টটি এখান থেকে Zip আকারে ডাউনলোড করুন।

প্রজেক্ট বিশ্লেষণ

উপরের প্রজেক্টটিতে চার লাইনের একটা আন অর্ডার লিস্ট নেয়া হয়েছে। প্রত্যেকটি লিস্টে আইডি সিলেক্টর যুক্ত করা হয়েছে। স্ট্যাইল শীটে <style>……… </style> এর মধ্যে #nav li{list-style:none;} যুক্ত করতে হয় লিস্ট এর সিম্বল দূর করার জন্য। li#s1{ width:130px; height:130px; background:url('f1.png') 0 0 ;} এর অনুরূপ যুক্ত করতে হয় ইমেজের কতটুকু অংশ প্রদর্শিত হবে তা নির্দেশ করার জন্য। এখানে width:130px; height:130px; দ্বারা নির্ধারিত হয়েছে ইমেজের প্রদর্শিত অংশের উচ্চতা হবে 130px এবং চওড়া হবে 130px ।li#s4{width:130px; height:115px; background:url('f1.png') -160px -130px;} এখানে background:url('f1.png') এর মাধ্যমে প্রয়োজনীয় ইমেজের লিংক যুক্ত করা হয়েছে। -160px -130px; এর প্রথম -160px দ্বারা নির্দেশ করো হয়েছে উপর থেকে 160px বাদে প্রদর্শিত হবে, দ্বিতীয় -130px; দ্বারা নির্দেশ করা হয়েছে বাম দিক থেকে 130px বাদে প্রদর্শিত হবে। অর্থাৎ চতুর্থ কর্ণারের ইমেজটি প্রদর্শিত হবে।