ইমেজ গ্যালারী পূর্ণাঙ্গ প্রজেক্ট

একটা ইমেজ গ্যালারী তৈরির জন্য প্রথমে gallery নামে একটা ফোল্ডার তৈরি করতে হবে।এর মধ্যে প্রয়োজনীয় 1.png , 2.jpg, 3.jpg, 4.jpg এর ইমেজ সমূহ রাখতে হবে।এর পর প্রয়োজনীয় কোড সমূহ নোটপ্যাড এর মাধ্যমে লেখার পর file মেনু থেকে Save as এ ক্লিক করে File name: gallery.html , Save as type : All files, দিয়ে save করতে হবে। gallery.html ফাইলটি gallery ফোল্ডারের মধ্যে রাখতে হবে। gallery.html ফাইলটি Mozilla Firefox দিয়ে ওপেন করলে ইমেজ গ্যালারীটি দেখা যাবে।

সোর্স কোড ডাউনলোড করুন

অনুশীলন প্রজেক্ট

<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;
background:#EBEDBA;
border:1px solid #f00;
padding:6px;
text-decoration:none;
font-family:Tahoma;
font-size:18px;
font-weight:bold; }
</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>

ইমেজ গ্যালারীটি নিচে প্রদর্শিত ছবির মত দেখাবে।