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

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

ইমেজ গ্যালারিতে প্রতিটি ইমেজ সংযোজন এর জন্য <a class="galpic"><img /><span><img /><br /><i> text </i></span></a> এর দুইটি img ট্যাগের মধ্যেই src="1.jpg" বা src="../images/8d.png" অথবা src="http://www.tutohost.com/bangla/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 করলে নিচে প্রদর্শিত ছবির মত দেখাবে।




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

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