ভিজিবিলিটি হিডেন – (visibility:hidden)
ডিসপ্লে নান -(display:none) এবং ভিজিবিলিটি হিডেন – (visibility:hidden;)উভই HTML উপাদানকে লুকানোর জন্য ব্যবহার করা হয়।কিন্তু উভয়ের মধ্যে পার্থক্য রয়েছে। কোন HTML উপাদানের জন্য CSS এ visibility:hidden; করলে HTML উপাদানটি প্রদর্শিত হয় না ঠিকই কিন্তু HTML উপাদানটি সমপরিমান স্থান ফাঁকা রাখে। কিন্তু কোন HTML উপাদানের জন্য CSS এ display:none;করলে HTML উপাদানটি প্রদর্শিত হয় না এবং কোন ফাঁকা স্থান তৈরি হয় না।
অনুশীলন প্রজেক্ট
<html>
<head>
<title> www.tutohost.com</title>
<style>
body{background:#FFC;}
#none{width:245px;
background:#C6C;
}
#none:hover{display:none;}
#hidde{width:245px;
background:#F30;
}
#hidde:hover{visibility:hidden;}
</style>
</head>
<body >
<div id="none"><h1>Please touch me.</h1></div> <br /><br />
<div id="hidde">
<h1>Please touch me.</h1></div>
<h2>Please touch me.</h2>
</body>
</html>
একটা নোটপ্যাড open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করে File name: index.html , Save as type : All files, দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে নিচে প্রদর্শিত ছবির মত দেখাবে।
কোডিং বিশ্লেষণ:
উপরের Please Touch Me. টেক্সটির উপর মাউস নিয়ে গেলে তা অদৃশ্য হয়ে যায় এবং তার নিচের টেক্সটটি উপরে উঠে আসে। কারণ এ টেক্সটিতে display:none; ব্যবহার করা হয়েছে।
মাঝের Please Touch Me. টেক্সটির উপর মাউস নিয়ে গেলে তা অদৃশ্য হয়ে যায়। কিন্তু লেখাটির সমপরিমান স্থান ফাঁকা থাকে। কারণ এ টেক্সটিতে visibility:hidden; ব্যবহার করা হয়েছে।
তিনি ইলেকট্রিক্যাল ইঞ্জিনিয়ারিং এ লেখাপড়া করছেন। টিউটোরিয়ালবিডি ও বিজ্ঞানপ্রযুক্তি ব্লগে তিনি ইলেক্ট্রনিক্স সহ বিভিন্ন টেকনোলজি বিষয়ে লিখে থাকেন। বর্তমানে তিনি লেখাপড়ার পাশাপাশি টিউটোহোস্টে কর্মরত আছেন।
কপি রাইট © ২০১১থেকে যতদিন চলবে সর্বস্বত্ত্ব সংরক্ষিত