ইমেজ গ্যালারীতে বড় ইমেজ প্রদর্শন
ইমেজ গ্যালারী প্রজেক্টটির মূল ফিচার ছিল যে প্রত্যেকটি ছোট ইমেজের উপর মাউস পয়েন্টার নিয়ে গেলে গ্যালারী স্ক্রিনে ঐ ইমেজটি বড় আকরারে প্রদর্শিত হবে।সাধারণ অবস্থায় ইমেজ গ্যালারিতে বড় আকৃতির ইমেজটি লুকানো অবস্থায় রাখা হয়েছিল, তাই এটাকে হোবার ইফেক্ট দিয়ে ভিজিবল করতে হবে। এজন্য সিউডো সিলেক্টর ব্যবহার করতে হবে .galpic:hover span । বড় ইমেজটি ভিজিবল করতে visibility: visible; ইমেজটি কোথায় প্রদর্শিত হবে তা নির্ধারণ করতে top: 196px; left: 14px; সবমিলিয়ে স্ট্যাইল শীটে .galpic:hover span{visibility: visible; top: 196px; left: 14px;} যুক্ত করা হয়েছে। মূলত এখানে span কে ভিজিবল করা হয়েছে।
অনুশীলন প্রজেক্ট
<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;}
.galpic img{
border: 1px solid #f00;
margin: 0 5px 5px 0;}
#screen{background:#000;
width:320px;
height:223px;
border:8px #960 solid;}
#screen h1{color:#F00;
font-family:Tahoma;
text-align:center;}
.galpic:hover img{
border: 1px solid blue;}
.galpic:hover span{
visibility: visible;
top: 196px;
left: 14px;}
</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 করলে নিচে প্রদর্শিত ছবির মত দেখাবে।
তিনি ইলেকট্রিক্যাল ইঞ্জিনিয়ারিং এ লেখাপড়া করছেন। টিউটোরিয়ালবিডি ও বিজ্ঞানপ্রযুক্তি ব্লগে তিনি ইলেক্ট্রনিক্স সহ বিভিন্ন টেকনোলজি বিষয়ে লিখে থাকেন। বর্তমানে তিনি লেখাপড়ার পাশাপাশি টিউটোহোস্টে কর্মরত আছেন।
কপি রাইট © ২০১১থেকে যতদিন চলবে সর্বস্বত্ত্ব সংরক্ষিত