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

<h3>วิธีทำ Banner ให้เว็บไซต์ แบบเปิดปิดอัตโนมัติ<&sol;h3>&NewLine;<p><&sol;br><&sol;p>&NewLine;<p><strong>วิธีทำ Banner<&sol;strong><&sol;p>&NewLine;<blockquote><p><a href&equals;"http&colon;&sol;&sol;codebee&period;co&period;th&sol;labs&sol;examples&sol;auto&lowbar;banner&sol;" target&equals;"&lowbar;blank">ดูตัวอย่าง Banner<&sol;a><&sol;p><&sol;blockquote>&NewLine;<p>หลาย ๆ เว็บไซต์จำเป็นต้องมีการแสดง Banner เพราะบางทีแบนเนอร์อาจจะเป็นรายได้หลักของเว็บไซต์ แต่แบนเนอร์นอกจากจะสร้างรายได้โฆษณาให้กับเว็บไซต์แล้ว การจัดวางหรือแสดงแบนเนอร์ในตำแหน่งที่ไม่เหมาะสมอาจจะทำให้เว็บไซต์ของเราถูดบดบังเนื้อหาหลักหรือเบนความสนใจ เนื้อหาที่เราต้องการสื่อกับผู้เข้าชมเว็บไซต์ ทำให้เว็บไซต์ขาดความน่าสนใจและลดความน่าเชื่อถือของผู้ชมที่มีแต่เว็บไซต์ลงไปได้ เพราะเฉพาะนั้นการจัดวางตำแหน่งในการแสดงผล Banner จึงเป็นสิ่งที่นักออกแบบต้องให้ความสำคัญเป็นอย่างยิ่ง<&excl;--more--><&sol;p>&NewLine;<p><&sol;br><&sol;p>&NewLine;<h4>สร้าง Image Banner แบบเปิด-ปิด การแสดงผลอัตโนมัติ<&sol;h4>&NewLine;<p><&sol;br><br &sol;>&NewLine;<strong>HTML<&sol;strong><br &sol;>&NewLine;สร้าง img element สำหรับแสดง Image Banner ขนาดตามความเหมาะสม แนะนำที่ขนาด 250x250px และทำการตั้งชื่อไอดีว่า &&num;8220&semi;banner&&num;8221&semi; โดยให้ใช้ a href element ครอบ img อีกทีหนึ่งเพื่อจะได้ทำเป็นลิงค์ได้<&sol;p>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " title&equals;"index&period;html" >&lt&semi;a id&equals;"banner" href&equals;"http&colon;&sol;&sol;www&period;codebee&period;co&period;th" target&equals;"&lowbar;blank"&gt&semi;&lt&semi;img src&equals;"banner&period;jpg"&gt&semi;&lt&semi;&sol;img&gt&semi;&lt&semi;&sol;a&gt&semi;<&sol;pre>&NewLine;<p><&sol;br><br &sol;>&NewLine;<strong>CSS<&sol;strong><br &sol;>&NewLine;จากนั้นให้เขียน CSS จัดวางตำแหน่งของ banner ไว้ที่ BOTTOM &plus; LEFT จะเขียน CSS ได้ดังนี้<&sol;p>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " >&num;banner&lbrace; &NewLine; border&colon;1px solid &num;000&semi; &NewLine; display&colon; none&semi; &NewLine; position&colon; fixed&semi; &NewLine; bottom&colon; 0px&semi; &NewLine; right&colon; 0px&semi; &NewLine; z-index&colon; 9998&semi; &NewLine;&rcub;<&sol;pre>&NewLine;<p><&sol;br><br &sol;>&NewLine;<strong>Javascript<&sol;strong><br &sol;>&NewLine;ต่อมาให้เขียน Javascript สำหรับกำหนดตำแหน่งในการ เปิด&sol;ปิด การแสดงผล โดยในตัวอย่างจะให้แสดงผลเมื่อเลื่อนหน้าเพจลงมาเกิน 10px และถ้าเลื่อนขึ้นไปด้านบนต่ำกว่า 10px จะไม่ให้ banner แสดงในหน้าเว็บ <&sol;p>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " >&dollar;&lpar;document&rpar;&period;ready&lpar;function&lpar;e&rpar; &lbrace; &NewLine;&Tab;&dollar;&lpar;window&rpar;&period;scroll&lpar;function&lpar;&rpar; &lbrace; &NewLine;&Tab;&Tab;if&lpar;&dollar;&lpar;window&rpar;&period;scrollTop&lpar;&rpar; &lt&semi;&equals; 10&rpar;&lbrace; &NewLine;&Tab;&Tab;&Tab;&dollar;&lpar;"&num;banner"&rpar;&period;hide&lpar;"fast"&rpar;&semi; &NewLine;&Tab;&Tab;&rcub;else&lbrace; &NewLine;&Tab;&Tab;&Tab;&dollar;&lpar;"&num;banner"&rpar;&period;show&lpar;"fast"&rpar;&semi; &NewLine;&Tab;&Tab;&rcub; &NewLine;&Tab;&rcub;&rpar;&semi; &NewLine; &rcub;&rpar;&semi;<&sol;pre>&NewLine;<p>เพียงเท่านี้เราก็จะสามารถกำหนดตำแหน่งที่อยากจะให้ Banner แสดงผลได้แล้วครับ เราสามารถปรับเปลี่ยนตำแหน่งของ Banner ได้ในส่วนของ CSS ตัวอย่างเช่นถ้าอยากให้ Banner แสดงในตำแหน่ง LEFT &plus; BOTTOM ก็จะสามารถเขียน CSS ได้ในลักษณะนี้<&sol;p>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " >&num;banner&lbrace; &NewLine; bottom&colon; 0px&semi; &NewLine; left&colon; 0px&semi; &NewLine;&rcub;<&sol;pre>&NewLine;<p><&sol;br><br &sol;>&NewLine;จากโค๊ดด้านบนทั้งหมด ท่านสามารถเข้าไปดูตัวอย่างการทำงานโดยรวมทั้งหมดได้ตามลิงค์ด้านล่างครับ<&sol;p>&NewLine;<blockquote><p><a href&equals;"http&colon;&sol;&sol;codebee&period;co&period;th&sol;labs&sol;examples&sol;auto&lowbar;banner&sol;" target&equals;"&lowbar;blank">ดูตัวอย่าง Banner<&sol;a><&sol;p><&sol;blockquote>&NewLine;