วิธีทำ Banner ให้เว็บไซต์ แบบเปิดปิดอัตโนมัติ

วิธีทำ Banner ให้เว็บไซต์ แบบเปิดปิดอัตโนมัติ

วิธีทำ Banner

ดูตัวอย่าง Banner

หลาย ๆ เว็บไซต์จำเป็นต้องมีการแสดง Banner เพราะบางทีแบนเนอร์อาจจะเป็นรายได้หลักของเว็บไซต์ แต่แบนเนอร์นอกจากจะสร้างรายได้โฆษณาให้กับเว็บไซต์แล้ว การจัดวางหรือแสดงแบนเนอร์ในตำแหน่งที่ไม่เหมาะสมอาจจะทำให้เว็บไซต์ของเราถูดบดบังเนื้อหาหลักหรือเบนความสนใจ เนื้อหาที่เราต้องการสื่อกับผู้เข้าชมเว็บไซต์ ทำให้เว็บไซต์ขาดความน่าสนใจและลดความน่าเชื่อถือของผู้ชมที่มีแต่เว็บไซต์ลงไปได้ เพราะเฉพาะนั้นการจัดวางตำแหน่งในการแสดงผล Banner จึงเป็นสิ่งที่นักออกแบบต้องให้ความสำคัญเป็นอย่างยิ่ง

สร้าง Image Banner แบบเปิด-ปิด การแสดงผลอัตโนมัติ

HTML
สร้าง img element สำหรับแสดง Image Banner ขนาดตามความเหมาะสม แนะนำที่ขนาด 250x250px และทำการตั้งชื่อไอดีว่า “banner” โดยให้ใช้ a href element ครอบ img อีกทีหนึ่งเพื่อจะได้ทำเป็นลิงค์ได้

<a id="banner" href="http://www.codebee.co.th" target="_blank"><img src="banner.jpg"></img></a>

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;
}

จากโค๊ดด้านบนทั้งหมด ท่านสามารถเข้าไปดูตัวอย่างการทำงานโดยรวมทั้งหมดได้ตามลิงค์ด้านล่างครับ

ดูตัวอย่าง Banner