Trang chủ / Blog / Tự động thay thế link ảnh hỏng bằng ảnh của bạn

Tự động thay thế link ảnh hỏng bằng ảnh của bạn


Chèn hình ảnh minh họa trong bài viết là một việc không thể thiếu để tăng tính hấp dẫn với người đọc. Tuy nhiên vì một lý do nào đó mà link ảnh bị hỏng làm cho trình duyệt không hiển thị ảnh (khi dùng FireFox) hoặc chỉ hiện một khung ảnh trống rổng kèm theo dấu chéo (IE) và lúc đó  bạn và người xem sẽ có cảm giác khó chịu.
Để tránh tình trạng này bạn nên chèn thêm một đoạn mã onerror=”this.src=’link ảnh thay thế’;” vào thẻ img để trình duyệt tự thay thế ảnh hỏng bằng ảnh khác do bạn chỉ định .
Đoạn mã này thực chất là sử dụng thêm sự kiện onerror và kết hợp với Javascript để thay thế đường dẫn ảnh bị hỏng bằng đường dẫn khác. Hầu hết các trình duyệt web hiện tại đề hổ trợ sử dụng sự kiện onerror.

ảnh minh họa

Ví dụ :

<img src="anhbiloi.jpg" onerror="this.src='images/no_image_138.jpg';" />

Xem thêm

Giới thiệu Google Sites và cách thay đổi favicon

Google sites là một nền tảng thay thế cho google pages giúp người dùng cá …

13 comments

  1. đoạn mã onerror này trước mình có dùng vào liên kết link logo.
    còn dùng vào bài viết. bạn nên cài vào bo-blog file thì hay hơn . nó thích hợp với những ai hay dùng photo ở các website khác.
      
    đây là host của bo-blog .. bạn vào đây xem nhé . đây là host mình đang dùng . http://www.ittot.com/

  2. còn đây là cách chèn đoạn mã onerror vào bo-blog file.

    1。Mở INC/UBB.PHP  ra .. và tìm
    <img src="{$src}" class="insertimage" alt="{$lnc[231]}" title="{$lnc[231]}"
    2。chèn mã code này ở sau

    onerror="this.src='yoursite/images/nopic.gif'"

    vậy là đã hoàn thành .. những tấm hình link bị hỏng sẽ đc tự thây thế ..

  3. Thx bác, cái này quả thật rất hay. 🙂

  4. cho em hỏi làm sao để tạo đc các icon trong mục thành viên như blog Canthoit.info.

  5. mình nghĩ cái này rất hay ..vì các bạn ở việt nam rất thích dùng link ảnh của các website khác . mình  đang làm thành một plugin .hiện nay đang hoàn thành 80% rồi .. Minit bạn and nick zing của mình nha ..  ID là: mxsf.net  mình send cho bạn tham khảo ..

    • Hi .
      Sorry các bạn vì hôm qua tới giờ ko trả lời comment nha (bận học bài, mới thi lại hồi sáng giờ mấy rảnh nè)
      @Twei : Hiện tại mình không dùng zing chat mà chỉ sử dụng Y!M thôi, nick mình là phamductin2004 . Hôm nay mới qua blog của bạn thấy cái giao diện mới cũng khá đẹp đấy chứ .
      Cái vụ thay thế link ảnh này mình cũng tình cờ phát hiện ra khi tìm cách áp dụng cho code rút gọn bài viết, ban đầu thì định check link ảnh hỏng bằng hàm php nhưng thấy nó không hiệu quả, làm tốc độ load trang web chậm hơn nên chuyển hướng sang Javascript.
      Hiện tại thì mình đã áp dụng cái này cho tất cả các ảnh minh họa trong bài viết và ảnh thumb ngoài trang chủ. Nhưng mình thấy không cần phải dùng đến plugin nên không viết, nếu bạn viết plugin xong rồi thì có thể share cho các bạn không rành việc chỉnh sửa code sử dụng sẽ tiện lợi hơn. :music:

  6. 1。Mở INC/UBB.PHP  ra .. và tìm
    <img src="{$src}" class="insertimage" alt="{$lnc[231]}" title="{$lnc[231]}"
    2。chèn mã code này ở sau

    onerror="this.src='yoursite/images/nopic.gif'"

    chèn rồi có thấy gì đâu bạn , có thể nói rỏ hơn kô bạn.

  7. Gửi bạn

    hihi

    bạn đã thay đường link của hình ảnh thành hình của bạn chưa ?   yoursite/images/nopic.gif   .mà cái này mình làm thành plugin rồi . nếu bạn cần thì mình sẽ gửi cho bạn qua email ..

  8. đã làm đúng như bạn , nhưng kô được , bạn vui lòng gởi hướng dẫn & plugin qua yahoo dùm he , cám ơn nhiều trongnguyencm09@yahoo.com.vn

  9. sao bạn kô gởi plugin qua mail cho mình vậy.

  10. admin nó chết ngắt rồi

  11. OH. Chào Admin . Bạn có thể viết code này thành 1 plugin được Không , nếu mà làm theo cách thủ công này thì rất mất nhiều thời gian bạn à . Mình đã test thử và rất Ok . Mau nhận hồi âm của Admin. Ok
    ——————–
    My BLog: [url=http://dactuyenvn.tk][/url]

Trả lời

Thư điện tử của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *