সাধারণ অবস্থায় ইমেজ গ্যালারিতে বড় আকৃতির ইমেজ লুকানো
ইমেজ গ্যালারিতে বড় ইমেজটিকে স্বভাবিক অবস্থায় লুকিয়ে রাখা হয়। একজন ব্যবহারকারী যখন ইমেজটির উপর মাউস পয়েন্টার নিয়ে যায় তখন তা প্রদর্শিত হয়।এ কাজটি করার জন্য স্ট্যাইল শীটে .galpic span{ position:absolute; left: 0px; visibility:hidden;} যুক্ত করতে হবে। এখানে position:absolute; left: 0px; এর মাধ্যমে বড় ইমেজটিকে সর্ববামে স্থান দেয়া হয়েছে। visibility:hidden; এর মাধ্যমে বড় ইমেজ গুলোকে লুকানো বা হাইড করা হয়েছে। এখানে একটা প্রশ্ন থাকতে পারে “ইমেজ গুলোকে যখন প্রদর্শন করা হচ্ছে না তখন কেন পজিশন এবসলিউট করে পজিশন নির্দেশ করা হল? আমাদের প্রজেক্টে ইমেজ গুলোর ক্রম ছিল “ছোট ইমেজ, বড় ইমেজ, ছোট ইমেজ, বড় ইমেজ, ছোট ইমেজ, বড় ইমেজ,ছোট ইমেজ, বড় ইমেজ” এরকম। তাই বড় ইমেজের পজিশন এবসলিউট করে দেয়ায় বড় ইমেজগুলো স্বাভাবিক পর্যায়ক্রম থেকে বেড়িয়ে এসছে এবং এ কারণেই ছোট ইমেজ সমূহ একত্রে পাশাপাশি অবস্থান করতে পেরেছে।
অনুশীলন প্রজেক্ট
<html>
<head>
<title> Gallery</title>
<style>
#container{
background:#999;
width:345px;
height:425px;
padding:7px 2px 7px 7px;
border:1px #000 solid;
position:relative;}
.galpic span{
position:absolute;
left: 0px;
visibility:hidden;}
</style>
</head>
<body>
<div id="container">
<a class="galpic"><img src="1.jpg" width="163px" height="80px" /><span><img src="1.jpg" width="300px" height="185px" /><br /><i>
text </i></span></a>
<a class="galpic"><img src="2.jpg" width="163px" height="80px" /><span><img src="2.jpg" width="300x" height="185px" /><br />
<i>text</i></span></a>
<br />
<a class="galpic"><img src="3.jpg" width="163px" height="80px" /><span><img src="3.jpg" width="300x" height="185px" /><br />
<i>text</i></span></a>
<a class="galpic"><img src="4.jpg" width="163px" height="80px" /><span><img src="4.jpg" width="300x" height="185px" /><br />
<i>text</i></span></a>
<br />
<div id="screen"><h1>Gallery<br />Screen</h1></div>
</div>
</body>
</html>
একটা নোটপ্যাড open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করে File name: index.html , Save as type : All files, দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে নিচে প্রদর্শিত ছবির মত দেখাবে।
তিনি ইলেকট্রিক্যাল ইঞ্জিনিয়ারিং এ লেখাপড়া করছেন। টিউটোরিয়ালবিডি ও বিজ্ঞানপ্রযুক্তি ব্লগে তিনি ইলেক্ট্রনিক্স সহ বিভিন্ন টেকনোলজি বিষয়ে লিখে থাকেন। বর্তমানে তিনি লেখাপড়ার পাশাপাশি টিউটোহোস্টে কর্মরত আছেন।
কপি রাইট © ২০১১থেকে যতদিন চলবে সর্বস্বত্ত্ব সংরক্ষিত