ইমেজ গ্যালারিতে নির্দিষ্ট আকৃতির ইমেজ সংযোজন

ইমেজ গ্যালারিতে প্রতিটি ইমেজ সংযোজন এর জন্য <a class="galpic"><img /><span><img /><br /><i> text </i></span></a> এর দুইটি img ট্যাগের মধ্যেই src="1.jpg" বা src="../images/8d.png" অথবা src="https://tutorialbd.com/css/images/pic/27e.png" এর অনুরূপ এট্রিবিউট যুক্ত করে ইমেজ যুক্ত করতে হবে। ছোট ইমেজের জন্য প্রথম img ট্যাগের মধ্যে width="163px" height="80px" এর অনুরূপ এট্রিবিউট যুক্ত করে ইমেজ এর আকৃতি নির্ধারণ করতে হবে।ছোট ইমেজটির উপর মাউস নিয়ে গেলে যে বড় ইমেজটি প্রদর্শিত হবে তার জন্য span ট্যাগের মধ্যে অবস্থিত img ট্যাগের মধ্যে width="300px" height="185px" এর অনুরূপ এট্রিবিউট যুক্ত করে ইমেজ এর আকৃতি নির্ধারণ করতে হবে।

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

<html>
<head>
<title> Gallery</title>
<style>
#container{
background:#999;
width:345px;
height:425px;
padding:7px 2px 7px 7px;
border:1px #000 solid;
position:relative;}
</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 করলে নিচে প্রদর্শিত ছবির মত দেখাবে।

ইমেজ গ্যালারিতে নির্দিষ্ট আকৃতির ইমেজ সংযোজন

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

প্রাথমিকঃ

স্টাইলঃ

ব্ক্স ও লেআউটঃ

এডভান্সঃ

ছবি ও মিডিয়াঃ

সম্পূর্ণ প্রজেক্টঃ

নেভিগেশন বার

ইমেজ গ্যালারি

ইমেজ স্প্রাইটস্ বাটন

অন্যান্যঃ