ป้ายกำกับ:
Blogger,
HTML
เขียนเมื่อ
วันพุธ, มีนาคม 10, 2553
ในตามปกติถ้าเราแทรกรูปภาพลงในบทความ แล้วเมื่อคลิกลงบนภาพก็จะลิงก์เข้าไปที่ URL ของภาพนั้นในขนาดเต็ม แต่ถ้าหากต้องการให้รูปภาพนั้นลิงก์ไปยัง URL ของเว็บปลายทางที่ต้องการ ซึ่งอาจต้องการให้เปิดแทนที่หน้าเดิม เปิดขึ้นในหน้าใหม่ หรือให้เป็นภาพที่ไม่มีลิงก์เวลาที่คลิก ก็สามารถกำหนดในโค้ด HTML ได้ัตามตัวอย่างด้านล่างนี้
(ลองกดตรงภาพตัวอย่างแต่ละชนิดเพื่อดูความแตกต่าง)
ก่อนอื่นให้กำหนด URL ซึ่งก็คือ
URL_ปลายทาง = เวลาโดนคลิกแล้วจะให้ไปที่ไหน หรือเปิดหน้าไหนขึ้นมา
URL_ของภาพ = ที่ตั้งของรูปซึ่งถูกเก็บ หรือฝากเอาไว้
โดยนำ URL ที่กำหนดไว้นั้นมาใส่ในลงโค้ดดังนี้
วิธีจัดการลิงก์รูปภาพแต่ละชนิด
1. ลิงก์รูปภาพที่เปิดขึ้นในหน้าเดิม
<a href="URL_ปลายทาง"><img src="URL_ของภาพ"></a>
ตัวอย่าง
โดยในตัวอย่างประกอบด้วยโค้ด HTML ดังนี้
<a href="http://maxlayout.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJD6fLQpYm2B7EB6LpHTngz1wrTjbgId5_81oJDxcp91OlWh8JyG0WIeDK_N4r8DRb53KErOHFXCkv5PX3gqKNBCWzcfS6uk8D2Ht1_T4vtxglUGZuua5IUu3TBIo86nW9ue_JJFmiUlI/"></a>
ซึ่ง URL ของตัวอย่างนี้ถูกกำหนดว่า
URL_ปลายทางคือ http://maxlayout.com/
URL_ของภาพคือ https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJD6fLQpYm2B7EB6LpHTngz1wrTjbgId5_81oJDxcp91OlWh8JyG0WIeDK_N4r8DRb53KErOHFXCkv5PX3gqKNBCWzcfS6uk8D2Ht1_T4vtxglUGZuua5IUu3TBIo86nW9ue_JJFmiUlI/
2. ลิงก์รูปภาพที่เปิดขึ้นมาในหน้าต่างใหม่
<a href="URL_ปลายทาง" target="_blank"><img src="URL_ของภาพ" /></a>
ตัวอย่าง
โดยจะต่างกับตัวอย่างลิงก์รูปภาพในข้อ 1 ก็ตรงที่มีการเพิ่ม _blank ลงไปด้วยการใช้โค้ด HTML ดังนี้
<a href="http://maxlayout.com/" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivXttt33GdWRTfqaqVq6oNK2DYrB4QAMh4-OYQ0IfSYuklnr-vXb1knHzBGziCpPsPubVbDfP13RWSDI3QDyUxMsZDzZtOEXA1bdmxLRPP8G3ZrgXRRL7VtanygEByl-KXmbSVr2v6r-g/" /></a>
ซึ่ง URL ของตัวอย่างนี้ถูกกำหนดว่า
URL_ปลายทางคือ http://maxlayout.com/
URL_ของภาพคือ https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivXttt33GdWRTfqaqVq6oNK2DYrB4QAMh4-OYQ0IfSYuklnr-vXb1knHzBGziCpPsPubVbDfP13RWSDI3QDyUxMsZDzZtOEXA1bdmxLRPP8G3ZrgXRRL7VtanygEByl-KXmbSVr2v6r-g/
3. ทำรูปภาพแบบไม่มีลิงก์
<img src="URL_ของภาพ" />
ตัวอย่าง
ทำได้โดยตัดโค้ดเกี่ยวกับลิงก์ออกไปดังนี้
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC9Og0JW9-YPvcXUMsml_DXUrdKhonUokYnGLPLG8POMbCkktzS_QlT0dvT6uB9VuKDN_7KdVF_s0N9MLwNIadQ0ecQ6iFosj5h7H5hM5KHa-VRqrlgvdrlf91bJLmJEAWwL2Dh9eoQ2k/" />
ซึ่ง URL ของตัวอย่างนี้ถูกกำหนดว่า
URL_ปลายทางคือ ไม่มีลิงก์ของเว็บปลายทาง
URL_ของภาพคือ https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC9Og0JW9-YPvcXUMsml_DXUrdKhonUokYnGLPLG8POMbCkktzS_QlT0dvT6uB9VuKDN_7KdVF_s0N9MLwNIadQ0ecQ6iFosj5h7H5hM5KHa-VRqrlgvdrlf91bJLmJEAWwL2Dh9eoQ2k/
