Computer >> Máy Tính >  >> Lập trình >> Javascript

Cách nhanh chóng để hoán đổi hình ảnh trên mouseOver / mouseOut với JavaScript nội tuyến

Đây là một cách tiếp cận JavaScript nội tuyến nhanh chóng và đơn giản để hoán đổi một hình ảnh mặc định với một hình ảnh khác khi bạn di chuyển chuột qua nó - và sau đó hoán đổi trở lại mặc định khi bạn di chuyển chuột ra ngoài lần nữa:

<img
  onmouseover="this.src='new-image.png'"
  onmouseout="this.src='default-image.png'"
  src="default-image.png"
/>

Ví dụ này giống hệt nhau, nhưng sử dụng hình ảnh trình giữ chỗ bên ngoài làm nguồn hình ảnh:

<img
  onmouseover="this.src='https://via.placeholder.com/150/0000FF/FFFFFF/?text=Digital.com'"
  onmouseout="this.src='https://via.placeholder.com/150/FF0000/808080/?text=Down.com'"
  src="https://via.placeholder.com/150/FF0000/808080/?text=Down.com"
/>

Bản trình diễn mã