วิธีใส่ลิงก์ในรูปภาพ HTML

บทความนี้สอนเขียนโค้ดวีธีใส่ลิงก์ในรูปภาพ HTML เพื่อสร้างลิงก์เชื่อมโยงจากรูปภาพที่ต้องการ ใช้ในกรณีที่ต้องการให้ผู้ใช้งานกดคลิกที่รูปภาพ และไปเปิดอีกหน้าที่ต้องการ ด้วยแท็ก a ร่วมกับ attribute href ของ HTML โดยมีรายละเอียดดังนี้

 

ตัวอย่าง วิธีใส่ลิงก์ในรูปภาพ HTML

1. ทำการแสดงรูปภาพที่หน้าเว็บไซต์ด้วยแท็ก img จากนั้นใส่ลิงก์ที่รูปภาพด้วยแท็ก a และกำหนดลิงก์ที่ต้องการด้วย attribute href โดยลิงก์ดังกล่าวสามารถเป็นลิงก์ภายในเว็บไซต์ หรือภายนอก (เว็บไซต์อื่น) ก็ได้

<a href="http://www.devdit.com/">
    <img src="image.jpg">
</a>

 

2. กรณีต้องการให้กดที่รูปภาพ และโหลดหน้าขึ้นมาอีก 1 แท็บโดยไม่แทนที่หน้าเว็บไซต์เดิมให้เพิ่ม attrubute target กำหนดค่าเท่ากับ _blank ดังนี้

<a href="http://www.devdit.com/" target="_blank">
    <img src="image.jpg">
</a>

 

3. กรณีต้องการใส่กรอบให้กับรูปภาพ ร่วมกับการใส่ลิงก์ แนะนำให้ใช้คำสั่ง CSS และเรียกใช้ภายใน HTML ดังนี้

<style>
    .my_image {
        border: solid 2px orange;
        border-radius: 2rem;
    }
</style>

<a href="http://www.devdit.com/">
    <img class="my_image" src="image.jpg">
</a>

จากตัวอย่างเป็นการสร้าง style ด้วย CSS ชื่อ my_image กำหนดขนาดกรอบความหนา 2px สีส้ม และขอบมน จากนั้นนำ style ดังกล่าวไปใช้กับรูปภาพผ่าน attribute class ของแท็ก img

 

สรุป บทความนี้ได้เรียนรู้วิธีการสร้างลิงก์ในรูปภาพด้วยคำสั่ง HTML โดยการใช้แท็ก a คลุมรูปภาพที่ต้องการ จากนั้นใช้ attribute href เพื่อกำหนดลิงก์ปลายทางที่ต้องการ และกรณีต้องการให้กดแล้วขึ้นหน้าใหม่ โดยไม่แทนที่หน้าเดิมให้เพิ่ม attrbute target เท่ากับ _blank