ইমেজ স্প্রাইটস্ (Image Sprites)
ওয়েব সাইটের জন্য আকর্ষণীয় বাটন তৈরির জন্য এবং নেভিগেশন বার তৈরির ক্ষেত্রে ইমেজ স্প্রাইটস একটা ভালো কৌশল। এক্ষেত্রে অনেকগুলো ইমেজ একত্রে করে একটা সিঙ্গেল ইমেজ তৈরি করা হয়। এবং প্রয়োজন অনুসারে ইমেজের বিশেষ অংশ প্রদর্শন করা হয়। সাধারণত একটা বাটন তৈরির ক্ষেত্রে দুইটি অবস্থা বিবেচনা করা হয়। একটা হচ্ছে সাধারণ অবস্থা এবং বাটনের উপর মাউস নিয়ে গেলে বাটনটি কেমন দেখাবে সে অবস্থা। দুইটি অবস্থার জন্য, সাধারণত দুইটি ইমেজ ব্যবহার করা হয়। কিন্তু ইমেজ স্প্রাইটস এর মাধ্যমে একটা ইমেজ ব্যবহার করেই বাটনটি তৈরি করা যাবে।
ইমেজ স্প্রাইটস্ কৌশল ব্যবহার করে তৈরি একটি বাটন
<html>
<head>
<title> Gallery</title>
<style>
body{background:#FC9}
#nav a{height:130px;display:block;}
#nav li{list-style:none;}
li#s1
{ width:108px; height:106px;
background:url('button.png') 0 0 ;}
li#s1:hover
{ width:108px; height:106px;
background:url('button.png') 0 115px;}
</style>
</head>
<body>
<h2>Full single image.</h2>
<img src="button.png">
<h2>Button: Click on the button.</h2>
<ul id="nav">
<li id="s1"><a href="#"></a></li>
<li id="s2"><a href="#"></a></li>
</ul>
</body>
</html>
উপরের প্রজেক্টটি তৈরি করার জন্য button নামে একটা ফোল্ডার তৈরি করতে হবে। ফোল্ডারটির মধ্যে button.png ইমেজটি রাখতে হবে। button.png ইমজটি এখান থেকে ডাউনলোড করুন। button নামে তৈরিকৃত ফোল্ডারের মধ্যেই একটা নোটপ্যাড open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করে File name: index.html , Save as type : All files, দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে নিচে প্রদর্শিত ছবির মত দেখাবে।
সম্পূর্ণ প্রজেক্টটি এখান থেকে Zip আকারে ডাউনলোড করুন।
তিনি ইলেকট্রিক্যাল ইঞ্জিনিয়ারিং এ লেখাপড়া করছেন। টিউটোরিয়ালবিডি ও বিজ্ঞানপ্রযুক্তি ব্লগে তিনি ইলেক্ট্রনিক্স সহ বিভিন্ন টেকনোলজি বিষয়ে লিখে থাকেন। বর্তমানে তিনি লেখাপড়ার পাশাপাশি টিউটোহোস্টে কর্মরত আছেন।
কপি রাইট © ২০১১থেকে যতদিন চলবে সর্বস্বত্ত্ব সংরক্ষিত