SIRIDET SIRIWAT: Tech & Tips

SWAP IMAGE

ขั้นตอนการทำ Swap Image

1. เตรียมรูปภาพที่ต้องการใช้ในการสร้างอย่างน้อย 2 ภาพขึ้นไป
2. สร้างไฟล์ใหม่ใน Dreamweaver
3. ทำการดึงรูปภาพเข้ามาในโปรแกรม โดยกดที่ตำแหน่ง A จากนั้นจะปรากฏหน้าไดอะล็อกบล็อก Select Image Source ตามรูปภาพด้านล่าง ให้ทำการเลือกไฟล์ภาพที่ต้องการให้เป็นภาพแรก จากนั้นกดปุ่ม OK ตามตำแหน่ง C

4. ทำการสร้างปุ่มใต้รูปภาพ โดยคลิกไปที่ Tap Manu > From > Button ซึ่งปุ่มใต้รูปภาพสามารถเปลี่ยนชื่อปุ่มได้ โดยเปลี่ยนที่ Value แล้วพิมพ์ชื่อที่ต้องการตั้งเข้าไป จากนั้นกำหนด Properties ของปุ่มแต่ละปุ่ม ให้กำหนด action เป็น reset form ตามตำแหน่ง E ตามรูปภาพด้านล่าง

5. เมื่อสร้างปุ่มจากข้อ 4. แล้ว ให้กำหนดค่าเป็น Behavior ให้แต่ละปุ่ม

6. เมื่อได้รูปภาพและปุ่มมาแล้ว ให้ทำการคลิกที่ปุ่ม จากนั้นสังเกตที่ Panel Group ทางด้านขวามือของโปรแกรม ให้เลือก Tap Behaviors (หากไม่มี Panel Group Behaviors ให้ทำการเรียกใช้งาน โดยการเลือกคำสั่ง Window จากเมนูบาร์ด้านบน แล้วเลือก Behaviors) จากนั้นคลิกที่รูปเครื่องหมายบวก ตามตำแหน่ง A แล้วเลือก Swap Image ตามรูปภาพด้านล่าง

7. เลือกรูปภาพที่จะนำมาแสดง โดยคลิกตามตำแหน่ง C > A > Bตามภาพด้านล่าง (จากรูปภาพด่านล่าง กำหนดให้รูปภาพนี้แสดงเป็นภาพแรก) เมื่อเลือกแล้วให้กด OK ในตำแหน่ง D และกำหนดรูปแบบตามขั้นตอนนี้ในปุ่มที่ต้องการ

8. Even ของแต่ละปุ่มให้กำหนดเป็น on Click

9. ทำการ save หน้าเว็บเพจให้เป็นเอกสาร .html จะได้ผลลัพธ์ที่ได้ เมื่อแสดงบนบราวเซอร์ Example: การแสดงผลบนหน้า Web

1. เมื่อกดปุ่ม ภาพที่ 1 ก็จะแสดงภาพแรกออกมา

2. เมื่อกดปุ่ม ภาพที่ 2 ก็จะแสดงภาพที่ 2 ออกมา

วิธีการติดตั้ง Like Box Facebook ในเว็บไซต์

1. ไปที่ (url) https://developers.facebook.com/docs/plugins/page-plugin จะเข้าสู่หน้า Page Plugin เพื่อสร้างโค้ด Like box

2. Copy URL ของ Facebook Fan Page ที่เราสร้างมาใส่ไว้ในช่อง Facebook Page URL (ตัวอย่าง Fan Page ของ ReadyPlanet มี URL คือwww.facebook.com/readyplanet เป็นต้น) จากนั้น เลือกรูปแบบการแสดงผลของ Like Box ตามหัวข้อที่ปรากฎ โดยจะมีการแสดงตัวอย่าง Like Box ปรากฏให้เห็นด้วย

Width คือ ขนาดความกว้างของ Like Box (ความกว้างเริ่มต้นที่ Facebook กำหนดให้คือ 280 pixels กว้างสูงสุดไม่เกิน 500 pixels)
Height คือ ขนาดความสูงของ Like Box (ความสูงเริ่มต้นที่ 130 pixels)
ตัวเลือก Hide Cover Photo คลิกเลือกเพื่อไม่ให้ภาพ Cover ของ Page แสดงผลใน Like Box
ตัวเลือก Show Friend's Faces คลิกเลือกแสดงหรือไม่แสดงรูปโปรไฟล์ของสมาชิกใน Page ใน Like Box
ตัวเลือก Show Page Posts เลือกแสดงหรือไม่แสดงการโพสต์ล่าสุดจาก Page

3. เมื่อตั้งค่าการแสดงผลของ Like Box ตามต้องการแล้ว คลิกปุ่ม Get Code

4. จะปรากฎหน้าต่าง Your plugin Code ให้คัดลอกโค้ดทั้ง 2 ส่วน ที่ปรากฎ (เพื่อความสะดวกตอนนำไปใส่ในเว็บไซต์ อาจ Copy Code ไปวางใน Notepad เตรียมไว้ก่อน ได้)