ইমেজ স্প্রাইটস্ এর মাধ্যমে বাটন তৈরি-(শেষ পর্ব)

ইতোমধ্যেই সিঙ্গেল ইমেজ তৈরির মাধ্যমে স্প্রাইটস্ বাটন তৈরির প্রথম ধাপ এবং এইচ টি এম এল স্ট্রাকচার এবং লিংক তৈরির মাধ্যমে দ্বিতীয় ধাপ সম্পন্ন হয়েছে।এ পর্যায়ে সি এস এস ব্যবহার করে বাটনের আকার আকৃতি, মার্জিন এবং বাটনেরর বিভিন্ন অবস্থায় বাটনটি কেমন দেখাবে ইত্যাদি নির্ধারণ করতে হবে।মূলত বাটনেরর বিভিন্ন অবস্থা নির্দেশের জন্য এংকর ট্যাগের background-image:url(button.png); এর অনুরূপ ব্যগ্রাউন্ড ইমেজ এবং background-position:center; এর অনুরূপ ব্যকগ্রাউন্ড পজিশন ব্যবহার করা হয়।

ইমেজ স্প্রাইটস্ বাটন প্রজেক্ট

<html>
<head>
<title> Gallery</title>
<style>
* { margin: 0; padding: 0; /* Reset */ }
#button {width: 433px; margin: 100px auto;}
#button p a.push {
display: block;
width:433px; height:174px;
background-image:url(button.png);}
#button p a.push:hover {
background-position:center;}
#button p a.push:active {
background-position:bottom;}
</style>
</head>
<body>
<div id="button">
<p><a href="button.zip" class="push"></a></p>
</div>
</body>
</html>

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

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

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

* {margin: 0; padding: 0; /* Reset */}
উপরের কোডটুকুর মাধ্যমে পেজকে রিসেট করা হয়েছে ।

#button {width: 433px; margin: 100px auto;}
উপরের কোডটুকুর মাধ্যমে বাটনের প্রস্থ এবং মার্জিন নির্ধারণ করা হয়েছে।

#button p a.push {
display: block;
width:433px; height:174px;
background-image:url(button.png);}
উপরের কোডটুকুর মাধ্যমে স্বভাবিক অবস্থায় বাটনটি কেমন দেখাবে অর্থাৎ সিঙ্গেল ইমেজের কতটুকু অংশ প্রদর্শন করবে তা নির্দেশ করা হয়েছে এবং background-image:url(button.png); এর মাধ্যমে ফটোশপে তৈরিকৃত button.png সিঙ্গেল ইমেজটি যুক্ত করা হয়েছে।

#button p a.push:hover {
background-position:center;}
উপরের কোডটুকুর মাধ্যমে বাটনের উপর মাউস পয়েন্টার নিয়ে গেলে অর্থাৎ hover কন্ডিশনে বাটনটি কেমন দেখাবে তা নির্দেশ করা হয়েছে।

background-position:center; এর মাধ্যমে button.png সিঙ্গেল ইমেজটির মাঝের অংশ প্রদর্শন করবে বিষয়টির নির্দেশ করা হয়েছে।

#button p a.push:active {
background-position:bottom;}
উপরের কোডটুকুর মাধ্যমে বাটনের উপর মাউস ক্লিক করার সময় অর্থাৎ active কন্ডিশনে বাটনটি কেমন দেখাবে তা নির্দেশ করা হয়েছে। background-position:bottom; এর মাধ্যমে button.png সিঙ্গেল ইমেজটির শেষের অংশ প্রদর্শন করবে বিষয়টির নির্দেশ করা হয়েছে।