รูปภาพเป็นส่วนประกอบทั่วไปของหน้าเว็บใดๆ นอกจากนี้ยังเป็นวิธีที่ยอดเยี่ยมในการสร้างลิงก์ไปยังหน้าอื่น ด้วยการใช้แท็ก anchor ร่วมกับแอตทริบิวต์ href และแท็กรูปภาพ เราสามารถสร้างภาพที่ทำหน้าที่เป็นลิงก์ระหว่างสองหน้าได้ คุณสามารถทำได้โดยทำตามขั้นตอนด้านล่าง:
- สร้างองค์ประกอบ div ซึ่งจะเก็บองค์ประกอบรูปภาพ แท็ก anchor และสิ่งอื่นที่เราอาจต้องการใช้เพื่ออธิบายลิงก์
- ถัดไป สร้างแท็กสมอ แท็ก มีการอ้างอิงไฮเปอร์เท็กซ์ (href) ที่ชี้ลิงก์ไปยังหน้าอื่น ตั้งค่า href เป็นไซต์หรือไฟล์ใดก็ได้ที่คุณต้องการให้ลิงก์ไป
- ระหว่างแท็กเปิดและปิด มาสร้างแท็ก
กัน โปรดจำไว้ว่าแท็กรูปภาพปิดตัวเองได้ เพิ่มแอตทริบิวต์ที่เรียกว่า src ที่จะชี้ไปที่ url หรือเส้นทางไปยังรูปภาพที่คุณใช้สำหรับลิงค์ของคุณ
- สร้างสิ่งที่จะอธิบายรูปภาพเพื่อให้ผู้ใช้รู้ว่าสามารถคลิกได้ นี่อาจเป็นแท็ก
แท็ก องค์ประกอบแท็ก
อะไรก็ได้ที่คุณต้องการ
ตัวอย่างการทำงานอยู่ในโปรแกรมแก้ไขโค้ดด้านล่าง ใช้เวลาในการเล่นกับมันอย่างแน่นอน!
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Image Link</title> <style> div { width: 500px; display: flex; flex-flow: column wrap; } img { width: 100%; } caption { width: 100%; height: 50px; } </style> </head> <body> <div> <a href="https://www.goldengate.org/" target="_blank" referrerpolicy="no-referrer"> <img src="https://images.unsplash.com/photo-1449034446853-66c86144b0ad?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80" alt="Golden Gate Bridge" refer/> </a> <caption> An icon in the San Francisco skyline, the Golden Gate bridge shines in the twilight night sky. Click the image to learn more information about the Golden Gate bridge. </caption> </div> </body> </html>หมายเหตุสุดท้าย:เป็นการดึงดูดที่จะใส่
<a>เฉพาะรอบคำบรรยาย – เนื่องจากนั่นคือสิ่งที่ลิงก์หมายถึง ผู้ใช้คาดหวังว่าหากพวกเขาคลิกที่รูปภาพ แท็บใหม่จะเปิดขึ้นพร้อมกับปลายทางของลิงก์ (นี่คือสิ่งที่ไวยากรณ์ target=”_blank” กำลังทำอยู่) ดังนั้น เก็บ<a>. ไว้ ล้อมรอบลิงก์และปล่อยให้ข้อความอธิบายรูปภาพ - หรือใส่<a>แท็กรอบทั้งข้อความและ<img>. ทั้งสองวิธีเป็นทางเลือกที่เป็นไปได้
