ใส่คำบรรยายให้รูปภาพ

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

การใส่ข้อความแทนรูปภาพในรูปภาพนั้น
1.ที่ตำแหน่ง tag img ส่วนหลังจาก attribute src ให้เราใส่ alt=”
2.พิมพ์ข้อความที่ต้องการ เพื่อสื่อถึงรูปนั้น เพื่อให้แสดงเมื่อรูปไม่สามารถแสดงได้
3.พิมพ์ ”

<h1>MindWebHost host ที่บริการด้วยใจ</h1>
<img src=”mindwebhost_logo.png” alt=”host คุณภาพ บริการด้วยใจ”/>
<p> หากคุณกำลังมองหา host สำหรับเว็บของคุณ
mindwebhost.com เป็นตัวเลือกสำหรับคุณแล้ว
บริการอย่างมั่นคงมาตั้งแต่ ปี 2549 จนถึงปัจจุบัน
เน้นคุณภาพไม่ใช่ปริมาณ มั่นใจได้ในคุณภาพ</p>
สิ่งเพิ่มเติมที่ 5.3 โค้ดเพื่อการแสดงผลรูปบนหน้าเว็บ โดยรูปนี้มีชื่อว่า mindwebhost_logo.png และเก็บอยู่ในแฟ้มเดียวกับ ไฟล์เว็บ รวมทั้งคำบรรยายว่า host คุณภาพ บริการด้วยใจ

เราถ้าเราวางเม้าส์เอาไว้ก็จะแสดง ข้อความใน alt ของเราขึ้นมา
สิ่งเพิ่มเติมที่ 5.4 รูปแสดงผลจากโค้ดที่ 5.3 จะเห็นได้ว่าเราถ้าเราวางเม้าส์เอาไว้ก็จะแสดง ข้อความใน alt ของเราขึ้นมา

เพิ่มเติม
- alt attribute นั้นเป็นสิ่งจำเป็นสำหรับ tag img ทุกๆตำแหน่ง ทั้ง XHTML และ HTML
- เมื่อรูปนั้นหายไปจาก address ที่เราระบุเอาไว้ ก็จะปรากฏเป็นข้อความใน alt ขึ้นมาแทน แล้วโดยปรกติจะถูกใช้เป็น tooltip โดยอัตโนมัติตามที่รูป 5.4 ได้แสดงให้ดู ซึ่งมีผลที่เหมือนกันกับ title tag โดยถ้าเน้นที่การแสดงเป็น tooltip ก็ให้ใช้ title tag แืทนที่ alt ได้เลย แต่ถ้าไม่ต้องการให้แสดง tooltip ก็ใส่ว่า title=” ”
- ถ้ารูปนั้นไม่ได้มีความหมายหรือสื่อถึงอะไรก็ตาม เช่นเส้น หรือปุ่มเล้กๆ ใน W3C บอกเราว่าให้เราใส่ alt=” ” เอาไว้
- screen reader ต่างๆ(โปรแกรมอ่านหน้าจอ) เช่น JAWS จะมีความสามารถในการอ่าน alternate text นี้ได้ ซึ่งทำให้ทราบได้เลยว่า รูปนั้นสื่อถึงอะไร
- และคุณก็ยังสามารถจำเอา Style sheet มาควบคุมการแสดงผลของ alternate text นี้ได้ด้วย

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