Blogger: จัดการลิงก์รูปภาพ

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

ก่อนอื่นให้กำหนด URL ซึ่งก็คือ
URL_ปลายทาง = เวลาโดนคลิกแล้วจะให้ไปที่ไหน หรือเปิดหน้าไหนขึ้นมา
URL_ของภาพ = ที่ตั้งของรูปซึ่งถูกเก็บ หรือฝากเอาไว้
โดยนำ URL ที่กำหนดไว้นั้นมาใส่ในลงโค้ดดังนี้

วิธีจัดการลิงก์รูปภาพแต่ละชนิด

1. ลิงก์รูปภาพที่เปิดขึ้นในหน้าเดิม
<a href="URL_ปลายทาง"><img src="URL_ของภาพ"></a>

ตัวอย่าง

โดยในตัวอย่างประกอบด้วยโค้ด HTML ดังนี้
<a href="http://maxlayout.com/"><img src="http://lh4.ggpht.com/_HNH4qHggrsw/S5hgyO9P8JI/AAAAAAAAAx4/322ISjE0oBk/count-number-001.jpg"></a>

ซึ่ง URL ของตัวอย่างนี้ถูกกำหนดว่า
URL_ปลายทางคือ http://maxlayout.com/
URL_ของภาพคือ http://lh4.ggpht.com/_HNH4qHggrsw/S5hgyO9P8JI/AAAAAAAAAx4/322ISjE0oBk/count-number-001.jpg

---

2. ลิงก์รูปภาพที่เปิดขึ้นมาในหน้าต่างใหม่
<a href="URL_ปลายทาง" target="_blank"><img src="URL_ของภาพ" /></a>

ตัวอย่าง

โดยจะต่างกับตัวอย่างลิงก์รูปภาพในข้อ 1 ก็ตรงที่มีการเพิ่ม _blank ลงไปด้วยการใช้โค้ด HTML ดังนี้
<a href="http://maxlayout.com/" target="_blank"><img src="http://lh4.ggpht.com/_HNH4qHggrsw/S5hgyPMz02I/AAAAAAAAAx8/MS8SJQUMv_k/count-number-002.jpg" /></a>

ซึ่ง URL ของตัวอย่างนี้ถูกกำหนดว่า
URL_ปลายทางคือ http://maxlayout.com/
URL_ของภาพคือ http://lh4.ggpht.com/_HNH4qHggrsw/S5hgyPMz02I/AAAAAAAAAx8/MS8SJQUMv_k/count-number-002.jpg

---

3. ทำรูปภาพแบบไม่มีลิงก์
<img src="URL_ของภาพ" />

ตัวอย่าง

ทำได้โดยตัดโค้ดเกี่ยวกับลิงก์ออกไปดังนี้
<img src="http://lh4.ggpht.com/_HNH4qHggrsw/S5hgyOi3frI/AAAAAAAAAyA/oyGxvDAlZP0/count-number-003.jpg" />

ซึ่ง URL ของตัวอย่างนี้ถูกกำหนดว่า
URL_ปลายทางคือ ไม่มีลิงก์ของเว็บปลายทาง
URL_ของภาพคือ http://lh4.ggpht.com/_HNH4qHggrsw/S5hgyOi3frI/AAAAAAAAAyA/oyGxvDAlZP0/count-number-003.jpg