รูปเมียหลวงไม่ขึ้น แสดงรูปเมียน้อยแทนได้มั๊ย

โดยปกติแล้ว เวลาเราโหลดรูปใส่ใน <img> ถ้าโหลดไม่ได้ ใน IE มันจะขึ้นเป็น กล่องเ็ล็ก ๆ มีกากบาทสีแดงข้างใน แต่สำหรับเว็บบราวเซอร์อื่น ก็จะขึ้นในรูปแบบที่แตกต่างกันไป

บทความนี้จะพูดถึงการที่เราอยากให้มันขึ้นรูปอื่นแทน ในกรณีที่รูปที่เราต้องการจริง ๆ มันโหลดไม่ขึ้น

วิธีทำก็แสนจะง่ายดายครับ ใช้ event ของ javascript มาช่วยนิดหน่อย

<img src="noimg.jpg" onerror="this.src='shark.jpg'">

จาก code ด้านบน ถ้ารูป noimg.jpg นั้นโหลดไม่ขึ้น ไม่ว่าด้วยสาเหตุใด มันจะโหลดรูป shark.jpg แทนครับ

ง่ายมั๊ยครับ เราไปดู LIVE DEMO กันดีกว่าครับ