ইমেজ স্প্রাইটস্ করার দ্বিতীয় কৌশল

ইমেজ স্প্রাইটস্ পদ্ধতি ব্যবহারের জন্য এমন একটা সিঙ্গেল ইমেজ তৈরি করা হয় যেখানে তিনটি একই মাপের ইমেজ পর্যায়ক্রমে যথাক্রমে top, center এবং bottom পজিশনে থাকে তাহলে background-position প্রোপার্টি ব্যবহার করে ইমেজ স্প্রাইটস্ করা যায়।যেমন এখান থেকে ইমেজটি ডাউনলোড করে দেখুন। ইমেজটিতে তিনটি ইমেজ রয়েছে; যদি একটি পেজে প্রথমে সম্পূর্ণ ইমেজটি প্রথমে তারপর ৩য় ইমেজটি এবং তারপর ১ম ইমেজটি এবং শেষে ২য় ইমেজটি আলাদাভাবে প্রদর্শন করার প্রয়োজন হয় তাহলে HTML অংশে নিচের কোড অংশটুকু যুক্ত করতে হবে।

<h1>Single image</h1>
<div id="img"></div>
<h1>3rd image</h1>
<div id="img3"></div>
<h1>1st image</h1>
<div id="img1"></div>
<h1>2nd image</h1>
<div id="img2"></div>

এখানে <h1></h1>ব্যবহার করা হয়েছে ইমেজ সম্পর্কিত তথ্য যুক্ত করা এবং ইমেজ গুলোকে যেন আলাদাভাবে সহজেই বোঝা যায়। মূলত প্রতিটা <div></div> এর ব্যাকগ্রাউন্ড হিসেবে ইমেজ সমূহ যুক্ত করা হবে এবং প্রদর্শন করা হবে। এখানে প্রতিটা <div></div> কে আলাদাভাবে চিহ্নিত করার জন্য id সিলেক্টর যুক্ত করা হয়েছে।

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

<html>
<head>
<title> Gallery</title>
<style>
* { margin: 0; padding: 0; /* Reset */ }
body{background:#9CC;}
div {margin:20px;}
h1{color:#C00;}
#img {width: 207px; height: 253px;
background-image: url(img.png);}
#img1 {display: block;
width: 207px; height: 70px;
background-image: url(img.png);}
#img2{display: block;
width: 207px; height: 70px;
background-image: url(img.png);
background-position: center;}
#img3{display: block;
width: 207px; height: 70px;
background-image: url(img.png);
background-position: bottom;}
</head>
<body>
<center>
<h1>Single image</h1>
<div id="img"></div>
<h1>3rd image</h1>
<div id="img3"></div>
<h1>1st image</h1>
<div id="img1"></div>
<h1>2nd image</h1>
<div id="img2"></div>
</center>
</body>
</html>

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

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

সি এস এস অংশে

#img {width: 207px; height: 253px;
background-image: url(button.png);}

উপরের কোড দ্বারা সম্পূর্ণ ইমেজের আকার আকৃতি এবং ব্যাকগ্রাউন্ড হিসেবে ইমেজ লোকেশন দেখানো হয়েছে।

#img1 {display: block;
width: 207px; height: 70px;
background-image: url(button.png);}

উপরের কোড দ্বারা ১ম ইমেজের আকার আকৃতি এবং ব্যাকগ্রাউন্ড হিসেবে ইমেজ লোকেশন দেখানো হয়েছে। যেহেতে এই ইমেজটি সকলের প্রথমে আছে তাই background-position প্রোপার্টি ব্যবহার করার প্রয়োজন হয়নি।সুতরাং সম্পূর্ন button.png ইমেজের প্রথম থেকে width: 207px; height: 70px; অংশ পর্যন্ত প্রদর্শিত হবে।

#img2{display: block;
width: 207px; height: 70px;
background-image: url(button.png);
background-position: center;}

উপরের কোড দ্বারা ২য় ইমেজের আকার আকৃতি এবং ব্যাকগ্রাউন্ড হিসেবে ইমেজ লোকেশন center দেখানো হয়েছে। সুতরাং button.png ইমেজের মাঝের 207px; height: 70px; অংশ পর্যন্ত প্রদর্শিত হবে ।

#img3{display: block;
width: 207px; height: 70px;
background-image: url(button.png);
background-position: bottom;}

উপরের কোড দ্বারা ২য় ইমেজের আকার আকৃতি এবং ব্যাকগ্রাউন্ড হিসেবে ইমেজ লোকেশন bottom দেখানো হয়েছে। সুতরাং button.png ইমেজের শেষের 207px; height: 70px; অংশ পর্যন্ত প্রদর্শিত হবে ।