วิธีทำแบนเนอร์ให้คลิกได้

สารบัญ:

วิธีทำแบนเนอร์ให้คลิกได้
วิธีทำแบนเนอร์ให้คลิกได้

วีดีโอ: วิธีทำแบนเนอร์ให้คลิกได้

วีดีโอ: วิธีทำแบนเนอร์ให้คลิกได้
วีดีโอ: สอนทำแบนเนอร์ แบบเคลื่อนไหว ในโปรแกรม Photoshop 2024, อาจ
Anonim

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

วิธีทำแบนเนอร์ให้คลิกได้
วิธีทำแบนเนอร์ให้คลิกได้

มันจำเป็น

ความสามารถในการเปลี่ยนมาร์กอัปของหน้าเว็บ

คำแนะนำ

ขั้นตอนที่ 1

ทำให้แบนเนอร์สามารถคลิกได้โดยวางไว้ในไฮเปอร์ลิงก์ ใช้องค์ประกอบ HTML A. เพิ่มแท็กเริ่มต้นด้วยแอตทริบิวต์ href ที่ชี้ไปยังทรัพยากรเป้าหมาย รวมทั้งแท็กปิดท้าย ตัวอย่างเช่น: นี่เป็นวิธีที่ง่ายที่สุดและใช้บ่อยที่สุดในการเพิ่มแบนเนอร์ลงในหน้าเว็บ อันที่จริง รูปภาพที่นี่เป็นจุดยึดของลิงก์

ขั้นตอนที่ 2

ใช้แผนที่ไคลเอ็นต์เพื่อสร้างฮอตสปอตหลายจุดในภาพแบนเนอร์ ในมาร์กอัป HTML ของเอกสารของคุณ ให้เพิ่มองค์ประกอบ MAP ด้วยแอตทริบิวต์ชื่อที่ระบุชื่อแผนที่ ใน MAP ให้วางลูก AREA อย่างน้อยหนึ่งรายการด้วยแอตทริบิวต์ href รูปร่างและ coords ที่ถูกต้อง ตัวอย่างเช่น: สำหรับองค์ประกอบ IMG ที่กำหนดแบนเนอร์ ให้เพิ่มแอตทริบิวต์ usemap ที่อ้างอิงถึงแผนที่ไคลเอนต์ ตัวอย่างเช่น: วิธีนี้ช่วยให้คุณใช้แบนเนอร์เดียวเพื่อเปลี่ยนเส้นทางผู้ใช้ไปยังทรัพยากรที่แตกต่างกัน ขึ้นอยู่กับพื้นที่ที่เปิดใช้งาน

ขั้นตอนที่ 3

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

ขั้นตอนที่ 4

ฝังแบนเนอร์ในหน้าเว็บโดยใช้องค์ประกอบ INPUT ของประเภทรูปภาพที่รวมอยู่ในแบบฟอร์มเพื่อให้คลิกได้ องค์ประกอบ INPUT ที่มีแอตทริบิวต์ประเภทรูปภาพกำหนดปุ่มส่งแบบกราฟิก ที่อยู่ทรัพยากรรูปภาพถูกระบุโดยแอตทริบิวต์ src ตัวอย่างเช่น: การประยุกต์ใช้วิธีการแสดงแบนเนอร์นี้ให้โอกาสที่ดี ดังนั้น คุณสามารถส่งข้อมูลเพิ่มเติมจำนวนมากไปยังเซิร์ฟเวอร์โดยใช้ฟิลด์ที่ซ่อนอยู่ โดยเฉพาะอย่างยิ่งการใช้คำขอ POST เพื่อส่งแบบฟอร์ม คุณสามารถดำเนินการบางอย่างในแบบฟอร์มก่อนส่งโดยกำหนดตัวจัดการ onsubmit อนุญาตให้กำหนดแผนที่ไคลเอนต์ให้กับรูปภาพปุ่มโดยใช้แอตทริบิวต์ usemap