ข่าวประชาสัมพันธ์

มาร่วมเป็นกำลังใจให้เว็บด้วยการสมัครสมาชิกวีไอพี ~~ เลือกปีที่ท่านต้องการได้โดยไม่ต้องเรียงปี ~~ ปีละ 350 บาท สมัคร 2 ปีลดเหลือ 600 บาท ~~ มีไลน์กลุ่ม VIP จำนวนหลายร้อยท่าน เอาไว้ปรึกษางานซ่อม ~~ เข้าถึงข้อมูลด้านเทคนิค ข้อมูลเชิงลึกมากมาย.....


ผู้เขียน หัวข้อ: วิธีทำแบนเนอร์ให้เปิด-ปิด อัตโนมัติ  (อ่าน 1726 ครั้ง)

0 สมาชิก และ 1 บุคคลทั่วไป กำลังดูหัวข้อนี้

ออฟไลน์ Auto Man

  • Administrator
  • หัวหน้าศูนย์ซ่อมสร้าง
  • *****
  • เจ้าของกระทู้
  • Joined: ก.ย. 2558
  • กระทู้: 37146
  • สมาชิกลำดับที่ : 1
  • เพศ: ชาย
  • มือผู้ให้ย่อมสูงกว่ามือผู้รับ
    • เว็บชุมชนคนรักช่างยนต์
    • อีเมล์
   วิธีทำ Banner ให้เว็บไซต์ แบบเปิดปิดอัตโนมัติ 


วิธีทำ Banner

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



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



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


-index.html
โค๊ด: [Select]
<a id="banner" href="http://www.codebee.co.th" target="_blank"><img src="banner.jpg"></img>[/url]

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


โค๊ด: [Select]
#banner{
    border:1px solid #000;
    display: none;
    position: fixed;
    bottom: 0px;
    right: 0px;
    z-index: 9998;
}


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


โค๊ด: [Select]
$(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 ได้ในลักษณะนี้


โค๊ด: [Select]
#banner{
    bottom: 0px;
    left: 0px;
}


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

- ตัวอย่างคลิ๊กไปดูที่นี่...

   มาจากที่นี่...
สวัสดีคุณ...ผู้เยี่ยมชม  กด ❤ ถูกใจโพสท์นี้ หรือยัง...
ต้องการสมัครสมาชิก VIP สมัครได้ที่นี่...   หรือทาง Line ID: k.sonchai