คอมโพเนนต์ปุ่มรูปภาพ

โฆษณา AMPHTML โฆษณาวิดีโอ หรือโฆษณาแบบรูปภาพไม่รองรับคอมโพเนนต์นี้

คอมโพเนนต์ปุ่มรูปภาพคือปุ่มที่มีสถานะเป็นภาพ 3 แบบ ได้แก่

ภาพที่เลื่อนขึ้น - ภาพเริ่มต้นเมื่อผู้ใช้ไม่ได้โต้ตอบกับปุ่ม
ภาพที่วางซ้อน - ภาพเมื่อเคอร์เซอร์ของผู้ใช้อยู่เหนือปุ่ม
ภาพที่เลื่อนลง - ภาพเมื่อผู้ใช้คลิกที่ปุ่ม

คอมโพเนนต์นี้ทำให้คุณสร้างปุ่มตอบสนองแบบภาพได้เพียงแค่ระบุรูปภาพ 3 รูป

วิธีใช้คอมโพเนนต์ปุ่มรูปภาพในโครงการของคุณ

เปิดแผงคอมโพเนนต์ จากนั้นเปิดโฟลเดอร์การโต้ตอบ
ลากคอมโพเนนต์ปุ่มรูปภาพ ไปยังพื้นที่งาน
ในส่วนคุณสมบัติของปุ่มรูปภาพของแผงคุณสมบัติ ให้ป้อน URL สำหรับภาพที่เลื่อนขึ้น ภาพที่วางซ้อน และภาพที่เลื่อนลง หากไฟล์แหล่งที่มาของรูปภาพอยู่ในเครื่อง ให้คลิกปุ่มเรียกดู ในช่องดังกล่าวเพื่อเลือกรูปภาพจากระบบไฟล์ของคอมพิวเตอร์

คุณสมบัติ

พร็อพเพอร์ตี้	คำอธิบาย
ชื่อ	ชื่อคอมโพเนนต์
ภาพที่เลื่อนขึ้น	URL สำหรับภาพปุ่มในสถานะที่ไม่มีการกด ซึ่งอ้างอิง URL ภายนอก ("https://www.google.com/example.jpg") หรือเนื้อหาในไลบรารี ("assets/example.jpg") ได้ เชื่อมโยงกับข้อมูลแบบไดนามิกได้
ภาพที่วางซ้อน	URL สำหรับภาพปุ่มในสถานะเมาส์โอเวอร์หรือวางเหนือ ซึ่งอ้างอิง URL ภายนอก ("https://www.google.com/example.jpg") หรือเนื้อหาในไลบรารี ("assets/example.jpg") ได้ เชื่อมโยงกับข้อมูลแบบไดนามิกได้
ภาพที่เลื่อนลง	URL สำหรับภาพปุ่มในสถานะที่มีการกด ซึ่งอ้างอิง URL ภายนอก ("https://www.google.com/example.jpg") หรือเนื้อหาในไลบรารี ("assets/example.jpg) ได้ เชื่อมโยงกับข้อมูลแบบไดนามิกได้
พื้นหลัง	สีที่มองเห็นได้หากรูปภาพมีขนาดเล็กกว่าพื้นที่คอมโพเนนต์ เชื่อมโยงกับข้อมูลแบบไดนามิกได้
การปรับแนว	วิธีปรับแนวของรูปภาพภายในคอมโพเนนต์ center bottom bottom left bottom right left right top top left top right
การปรับขนาด	วิธีแสดงรูปภาพที่มีขนาดต่างจากคอมโพเนนต์ ปรับขนาดรูปภาพให้พอดี - ปรับขนาดรูปภาพให้ใหญ่ที่สุดภายในพื้นที่คอมโพเนนต์โดยไม่ต้องครอบตัดหรือยืด ครอบตัดรูปภาพให้เต็มพื้นที่ - ปรับขนาดรูปภาพให้ใหญ่ที่สุดจนเต็มพื้นที่คอมโนเนนต์โดยไม่ต้องยืดหรือครอบตัดรูปภาพทั้งแนวตั้งและแนวนอน ไม่มี ขยายรูปภาพให้เต็มพื้นที่ - แสดงรูปภาพเต็มภายในพื้นที่คอมโพนเนต์ทั้งหมด
ปิดใช้อยู่	ปิดใช้ปุ่ม ไม่ได้เลือกไว้โดยค่าเริ่มต้น

เหตุการณ์และการทำงาน

เหตุการณ์ที่ส่งโดยคอมโพเนนต์ปุ่มรูปภาพ

คุณทริกเกอร์การทำงานอื่นๆ โดยอิงตามเหตุการณ์ของคอมโพเนนต์ปุ่มรูปภาพได้ดังนี้

เหตุการณ์	รายละเอียด
โหลดปุ่มรูปภาพแล้ว	ส่งเมื่อโหลดรูปของปุ่มทุกรูปแล้ว

หากต้องการเลือกหนึ่งในเหตุการณ์เหล่านี้ในกล่องโต้ตอบเหตุการณ์ ให้ตั้งค่าคอมโพเนนต์ปุ่มรูปภาพเป็นเป้าหมาย

การทำงานที่ทำโดยคอมโพเนนต์ปุ่มรูปภาพ

การทำงานของคอมโพเนนต์ปุ่มรูปภาพที่ทริกเกอร์ให้ตอบสนองต่อเหตุการณ์อื่นได้มีดังนี้

การทำงาน	ตัวเลือกการกำหนดค่า
Toggle enable	ไม่มี
Set images	Up image source - URL ของรูปภาพที่เลื่อนขึ้นรูปใหม่ Over image source - URL ของรูปภาพที่วางซ้อนรูปใหม่ Down image source - URL ของรูปภาพที่เลื่อนลงรูปใหม่

เมื่อเลือกการทำงานอย่างใดอย่างหนึ่งในกล่องโต้ตอบเหตุการณ์ ให้ตั้งค่าคอมโพเนนต์ปุ่มรูปภาพเป็นตัวรับ

ดูวิธีกำหนดค่าเหตุการณ์

แสดงตัวอย่าง

การแสดงตัวอย่างคอมโพเนนต์นี้ภายในอินเทอร์เฟซของ Google Web Designer นั้นทำไม่ได้ หากต้องการดูการทำงานของคอมโพเนนต์ ให้แสดงตัวอย่างเอกสารในเบราว์เซอร์ที่ต้องการ โดยคลิกปุ่มแสดงตัวอย่าง ที่มุมขวาบน

ข้อมูลนี้มีประโยชน์ไหม

เราจะปรับปรุงได้อย่างไร