Bloggang.com : ทองกาญจนา : การตกแต่งบล็อกสำหรับมือใหม่ #10 การสร้าง link จากภาพ

การตกแต่งบล็อกสำหรับมือใหม่ #10 การสร้าง link จากภาพ

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

การเตรียมการ

1. เตรียมภาพที่ให้ผู้ชมคลิกแล้วจะเชื่อมโยงไปยัง URL ที่ต้องการ ภาพนี้ควรมีขนาดความกว้างมากกว่า 450 pixel เล็กน้อย (เช่น 452) ส่วนความสูงให้สอดคล้องกัน และขนาดไฟล์ต้องไม่เกิน 150 K ตัวอย่างภาพเช่น

2. เตรียม URL ปลายทางให้พร้อมใช้ อาจใช้วิธีตัด-แปะ (copy-paste) จะดีกว่าพิมพ์ลงไปตรง ๆ ซึ่งจะผิดพลาดได้ง่าย เช่น URL เป็น

//topicstock.pantip.com/blueplanet/topicstock/2011/04/E10464597/E10464597.html

ลงมือปฏิบัติการ

1.ขณะที่กำลังเขียนบล็อก ในหน้าต่างรายละเอียด ให้เลือกคำสั่งใส่รูปจากแถบจัดการข้อความ แล้วใส่รูปที่เตรียมไว้ลงไป เมื่อกลับมาที่หน้าต่างเดิมจะเห็นโค๊ดลักษณะนี้

<a href="//www.bloggang.com/data/a/ampols/picture/1304737171.jpg" target=_blank><img src = //www.bloggang.com/data/ampols/picture/1304737171.jpg width='450' height='361' border=0></a>

จะสังเกตเห็นความกว้างของภาพจะแสดงเพียง 450 คือคำสั่ง width='450' ซึ่งถูกต้องแล้ว

2.นำ URL ที่ต้องการให้ link ไป มาแทนที่ในส่วนที่เป็นอักษรสีแดง จะได้โค๊ดใหม่ดังนี้

<a href="//topicstock.pantip.com/blueplanet/topicstock/2011/04/E10464597/E10464597.html
" target=_blank><img src = //www.bloggang.com/data/ampols/picture/1304737171.jpg
width='450' height='361' border=0></a>

3.เพียงเท่านี้เองงานก็เสร็จแล้ว สามารถคลิกที่ภาพให้ link ไปยัง URL ที่ต้องการได้แล้วครับ (ลองทดลองดูได้เลย)

ภาพเดียว link ไปหลายที่

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

การทำให้ได้งานตามตัวอย่างจำเป็นจะต้องสร้าง แผนผังของภาพ หรือ Image Map ซึ่งมีวิธีการที่ยุ่งยากเพิ่มขึ้น จะขอนำไปอธิบายในบทเรียนครั้งต่อ ๆ ไปครับ.

Create Date : 07 พฤษภาคม 2554

Last Update : 23 มิถุนายน 2554 16:59:24 น.

8 comments

Counter : 1419 Pageviews.

ภาพนี้ควรมีขนาดความกว้างมากกว่า 450 pixel เล็กน้อย (เช่น 452) ส่วนความสูงให้สอดคล้องกัน และขนาดไฟล์ต้องไม่เกิน 150 K

ถ้าภาพเล็กกว่านี้ ทำไม่ได้หรือคะ ?

โดย: ฟ้าใสวันใหม่

วันที่: 7 พฤษภาคม 2554 เวลา:14:59:24 น.

สวัสดีตอนเย็นครับคุณฟ้าใสวันใหม่
ขอบคุณที่ทำให้บทเรียนนี้สมบูรณ์ยิ่งขึ้น โดยดูตัวอย่างที่คุณฟ้าใสทำมา (ซึ่งไม่ใช่มือใหม่แล้วครับ)

ที่จริงภาพที่นำมาใช้จะมีขนาดกว้างยาวเท่าไรก็ได้ครับ (แต่ขนาดของไฟล์ภาพต้องไม่เกิน 150 KB) แบ่งเป็น 2 กรณี

1.ถ้าภาพมีขนาดความกว้างน้อยกว่าหรือเท่ากับ 450 เมื่อใส่ภาพลงไปแล้วโค๊ดจะไม่มีคำสั่ง link ให้เห็น ทำให้ยากในการอธิบายสำหรับมือใหม่ ที่จะต้องใส่โค๊ดทั้งหมดลงไป

2.ถ้าภาพมีความกว้างมากกว่า 450 เมื่อใส่ภาพลงไปจะถูกลดขนาดให้เหลือความกว้างเพียง 450 แล้วสร้าง link ให้คลิกเพื่อดูภาพที่มีขนาดตามต้นฉบับเดิม

ผมใช้กรณีที่ 2 อธิบายให้มือใหม่ทดลองทำตามอย่างง่าย ๆ เมื่อเข้าใจแล้วก็สามารถจะใช้ภาพที่มีความกว้างในกรณีที่ 1 ได้ไม่ยากแล้วครับ

โดย: ทองกาญจนา

วันที่: 7 พฤษภาคม 2554 เวลา:18:47:25 น.

แวะมาดูคำตอบค่า ...
เข้าใจแล้วค่ะ มิน่าพอใส่ภาพเล็กทีไร โค้ดถึงไม่มีคำสั่ง link ให้เห็น

จริง ๆ ก็ยังเป็นมือใหม่อยู่นั่นแหละ ภาพที่เอามาใส่ก็เอาของคนอื่นเขามาอีกที ไม่ได้เก่งอะไรเลย แหะ ๆ

ขอบคุณสำหรับคำตอบนะคะ