যারা নতুন ওয়েব প্রোগ্রাম শিখছে তাদের জন্য আমার এই পোষ্ঠ। আমরা যারা
ওয়েব ডিজাইন করে থাকি তারা বিভিন্ন script ব্যবহার করে slideshow তৈরি
করে থাকে । কোন প্রকার script ছাড়া সহজে কিভাবে html-css slideshow
তৈরি করতে পারবেন তা দেখাব চলুন শুরু করি।আমি দরে নিচ্ছি আপনি basic html
পারেন।প্রথমে আপনার desktop এ mahbub নামে একটি folder বানান এবং jpge
formaট এর দুইটি picture copy করে paste করুন mahbub নামে folderএ ।
picture দুটির প্রথমটার নাম দিন aidmahbub1 এবং দ্বিতীয়টার না
দিন aidmahbub2। নিচের কোডটি notepad এ copy করে paste করুন:-
<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css" />
<title>html slider</title>
</head>
<body>
<div id="slide1">
<marquee scrollamount="8" onMouseOver="this.stop()" onMouseOut="this.start()"><a href="#"> <img src="aidmahbub1.jpg" alt="slideshow" width="316" height="216" alt="Slide 1 jFlow Plus" /></a> <a href="#"><img src="aidmahbub2.jpg" alt="slideshow" width="320" height="220" alt="Slide 1 jFlow Plus" /></a></marquee>
</div></body>
</html>
এবার mahbub নামে folder এ এটি save করুন mahbub.html নামে। এখন আবার notepad খুলুন নিচের কোড copy করে paste করুন:-(এটা ছাড়াও কাজ করবে)
body {background:#999999;
}
#slide1{
width:320px;
height:220px;
margin-left:500px;
margin-top:60px;
padding:120px;
}
a:hover{
background-color:#00FF66;
}
এবার mahbub নামে folder এ এটি save করুন style.css নামে। কাজ শেষ এবার mahbub.html ফাইলটি open করুন দেখুন ছবি দুটি ডান থেকে বামে চলতে থাকবে এবং মাউন এর কার্সার নিলে ছবি স্থীর হবে মাউস সরালে আবার চলতে থাকবে।
<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css" />
<title>html slider</title>
</head>
<body>
<div id="slide1">
<marquee scrollamount="8" onMouseOver="this.stop()" onMouseOut="this.start()"><a href="#"> <img src="aidmahbub1.jpg" alt="slideshow" width="316" height="216" alt="Slide 1 jFlow Plus" /></a> <a href="#"><img src="aidmahbub2.jpg" alt="slideshow" width="320" height="220" alt="Slide 1 jFlow Plus" /></a></marquee>
</div></body>
</html>
এবার mahbub নামে folder এ এটি save করুন mahbub.html নামে। এখন আবার notepad খুলুন নিচের কোড copy করে paste করুন:-(এটা ছাড়াও কাজ করবে)
body {background:#999999;
}
#slide1{
width:320px;
height:220px;
margin-left:500px;
margin-top:60px;
padding:120px;
}
a:hover{
background-color:#00FF66;
}
এবার mahbub নামে folder এ এটি save করুন style.css নামে। কাজ শেষ এবার mahbub.html ফাইলটি open করুন দেখুন ছবি দুটি ডান থেকে বামে চলতে থাকবে এবং মাউন এর কার্সার নিলে ছবি স্থীর হবে মাউস সরালে আবার চলতে থাকবে।
No comments:
Post a Comment