ভিজিবিলিটি হিডেন | সি এস এস বাংলা টিউটোরিয়াল

ভিজিবিলিটি হিডেন – (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; ব্যবহার করা হয়েছে।

লেখকঃ অসীম কুমার
তিনি ইলেকট্রিক্যাল ইঞ্জিনিয়ারিং এ লেখাপড়া করছেন। টিউটোরিয়ালবিডি ও বিজ্ঞানপ্রযুক্তি ব্লগে তিনি ইলেক্ট্রনিক্স সহ বিভিন্ন টেকনোলজি বিষয়ে লিখে থাকেন। বর্তমানে তিনি লেখাপড়ার পাশাপাশি টিউটোহোস্টে কর্মরত আছেন।

কপি রাইট টিউটোহোস্ট ২০১০-২০১২