ใช้รูปภาพเป็นป้ายกำกับของลิ้งค์

เมื่อยุคที่ internet เป็นเรื่องของกราฟิกมากขึ้น(เมื่อก่อนนู้นมีแต่เพียงตัวอักษรเท่านั้น) เราก็จะเริ่มนำเอารูปภาพต่างมาเป็นปุ่ม หรือเพื่อสื่อสารบางอย่างเพื่อให้ user เกิดการ click เกิดขึ้น โดยการที่เรานำเอา รูปภาพมาเป็นป้ายกำกับ หรือเป็นตัวลิ้งค์ไปยังปลายทางอีกทีนั่นเอง

<p>เราจะพาท่านไปยัง mindwebhost.com host ที่เน้นคุณภาพ
และบริการด้วยใจ <a href=”http://www.mindwebhost.com”>
<img src=”arrow.gif” alt=”host คุณภาพ” border=”0″ /></a></p>
สิ่งเพิ่มเติมที่ 6.11 โค้ดที่นำรูปภาพมาเป็นลิ้งค์ โดยให้รูปภาพเป็นป้ายกำกับลิ้งค์ เพื่อนำไปยังปลายทางที่เราต้องการ

การใช้รูปสร้างลิ้งค์
1.พิมพ์ <a href=”destination”> โดยที่ destination คือปลายทางที่เราต้องการให้ลิ้งค์ไป เมื่อกดที่รูป
2.พิมพ์ <img src=”image.location” โดยที่ image.location คือตำแหน่งที่เก็บรูปบน server เพื่อให้แสดงรูปขึ้นมาได้
3.ถ้าต้องการให้พิมพ์ border=”n” โดยที่ n คือเลขความกว้างของเส้นขอบรอบรูป มีหน่วยเป็น pixel ค่า 0 คือไม่มีเส้นขอบ
4.ใส่ images attribute อื่นๆถ้าต้องการ จากนั้นพิมพ์ /> เพื่อปิด tag ของ image
5.ถ้าต้องการให้พิมพ์ label text เพื่อเป็นการกำกับรูปนั้นว่าสื่อถึงอะไร
6.พิพม์ </a> เพื่อทำ tag link ให้สมบูรณ์

รูปเป็นลิ้งค์
สิ่งเพิ่มเติมที่ 6.12 รูปที่แสดงจากโค้ด 6.11 ที่นำรูปมาเป็นลิ้งค์ไปยังปลายทางที่เราต้องการ

เพิ่มเติม
-โดยทั่วไป browser จะตีเส้นรอบรูปให้ ถ้ารูปนั้นเป็นลิ้งค์ แต่เรากำหนดให้ไม่มีเส้นขอบได้ด้วยการกำหนดค่า border เป็น 0 ในขั้นตอนที่ 3 นั่นเอง

No comments yet.
You must be logged in to post a comment.