วิธีทำ-Banner

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

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


วิธีทำ Banner

ดูตัวอย่าง Banner

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


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



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



CSS
จากนั้นให้เขียน CSS จัดวางตำแหน่งของ banner ไว้ที่ BOTTOM + LEFT จะเขียน CSS ได้ดังนี้



Javascript
ต่อมาให้เขียน Javascript สำหรับกำหนดตำแหน่งในการ เปิด/ปิด การแสดงผล โดยในตัวอย่างจะให้แสดงผลเมื่อเลื่อนหน้าเพจลงมาเกิน 10px และถ้าเลื่อนขึ้นไปด้านบนต่ำกว่า 10px จะไม่ให้ banner แสดงในหน้าเว็บ

เพียงเท่านี้เราก็จะสามารถกำหนดตำแหน่งที่อยากจะให้ Banner แสดงผลได้แล้วครับ เราสามารถปรับเปลี่ยนตำแหน่งของ Banner ได้ในส่วนของ CSS ตัวอย่างเช่นถ้าอยากให้ Banner แสดงในตำแหน่ง LEFT + BOTTOM ก็จะสามารถเขียน CSS ได้ในลักษณะนี้



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

ดูตัวอย่าง Banner

กระทู้ใกล้เคียง

ทำเว็บไซต์ สอน CSS การใช้งาน before, after และ con... ทำเว็บไซต์ สอน CSS การใช้งาน before, after และ content ทำเว็บไซต์ สอน CSS คงจะเคยผ่านตามากันบ้างแล้วสำหรับนักพัฒนาเว็บไซต์สำหรับ before, after และ...
HTML5 Video ทำวีดีโอให้เป็นพื้นหลัง... HTML5 Video ทำวีดีโอให้เป็นพื้นหลัง อีกหนึ่งเทคนิคการทำเว็บไซต์สมัยใหม่ที่นิยมทำกันมากมายในปัจจุบัน เป็นลูกเล่นการทำเว็บไซต์ที่ดึงดูดผู้เข้าชมเว็บไ...
วิธีทำเว็บ ให้โหลดเร็ว เทคนิคเพิ่มความเร็วให้เว็บไ... วิธีทำเว็บ ให้โหลดเร็ว เทคนิคเพิ่มความเร็วให้เว็บไซต์ วิธีทำเว็บ ให้โหลดเร็ว เคยไหมครับที่คลิกลิงค์ข่าวจาก facebook เพราะอ่านคำโปรยแล้ว อยากจะเข้...
ทำเว็บไซต์ ด้วย CSS3 Media Query คืออะไร และการใช... ทำเว็บไซต์ CSS3 Media Query คืออะไร เขียนคำสั่ง CSS ให้ทำงานในขนาดหน้าจอที่แตกต่างกัน ทำเว็บไซต์ ด้วย CSS3 Media Query คือคุณสมบัติที่มีอยู่ในภาษา...