วิธีทำ Banner ให้เว็บไซต์ แบบเปิดปิดอัตโนมัติ วิธีทำ Bannerดูตัวอย่าง Banner
หลาย ๆ เว็บไซต์จำเป็นต้องมีการแสดง Banner เพราะบางทีแบนเนอร์อาจจะเป็นรายได้หลักของเว็บไซต์ แต่แบนเนอร์นอกจากจะสร้างรายได้โฆษณาให้กับเว็บไซต์แล้ว การจัดวางหรือแสดงแบนเนอร์ในตำแหน่งที่ไม่เหมาะสมอาจจะทำให้เว็บไซต์ของเราถูดบดบังเนื้อหาหลักหรือเบนความสนใจ เนื้อหาที่เราต้องการสื่อกับผู้เข้าชมเว็บไซต์ ทำให้เว็บไซต์ขาดความน่าสนใจและลดความน่าเชื่อถือของผู้ชมที่มีแต่เว็บไซต์ลงไปได้ เพราะเฉพาะนั้นการจัดวางตำแหน่งในการแสดงผล Banner จึงเป็นสิ่งที่นักออกแบบต้องให้ความสำคัญเป็นอย่างยิ่ง
สร้าง Image Banner แบบเปิด-ปิด การแสดงผลอัตโนมัติ
HTMLสร้าง img element สำหรับแสดง Image Banner ขนาดตามความเหมาะสม แนะนำที่ขนาด 250x250px และทำการตั้งชื่อไอดีว่า “banner” โดยให้ใช้ a href element ครอบ img อีกทีหนึ่งเพื่อจะได้ทำเป็นลิงค์ได้
-index.html
<a id="banner" href="http://www.codebee.co.th" target="_blank"><img src="banner.jpg"></img>[/url]
CSSจากนั้นให้เขียน CSS จัดวางตำแหน่งของ banner ไว้ที่ BOTTOM + LEFT จะเขียน CSS ได้ดังนี้
#banner{
border:1px solid #000;
display: none;
position: fixed;
bottom: 0px;
right: 0px;
z-index: 9998;
}
Javascriptต่อมาให้เขียน Javascript สำหรับกำหนดตำแหน่งในการ เปิด/ปิด การแสดงผล โดยในตัวอย่างจะให้แสดงผลเมื่อเลื่อนหน้าเพจลงมาเกิน 10px และถ้าเลื่อนขึ้นไปด้านบนต่ำกว่า 10px จะไม่ให้ banner แสดงในหน้าเว็บ
$(document).ready(function(e) {
$(window).scroll(function() {
if($(window).scrollTop() <= 10){
$("#banner").hide("fast");
}else{
$("#banner").show("fast");
}
});
});
เพียงเท่านี้เราก็จะสามารถกำหนดตำแหน่งที่อยากจะให้ Banner แสดงผลได้แล้วครับ เราสามารถปรับเปลี่ยนตำแหน่งของ Banner ได้ในส่วนของ CSS ตัวอย่างเช่นถ้าอยากให้ Banner แสดงในตำแหน่ง LEFT + BOTTOM ก็จะสามารถเขียน CSS ได้ในลักษณะนี้
#banner{
bottom: 0px;
left: 0px;
}
จากโค๊ดด้านบนทั้งหมด ท่านสามารถเข้าไปดูตัวอย่างการทำงานโดยรวมทั้งหมดได้ตามลิงค์ด้านล่างครับ
- ตัวอย่างคลิ๊กไปดูที่นี่... มาจากที่นี่...