Rê chuột chuyển hình đơn giản nhất cho Web - Blog

Làm thế nào để rê chuột mà hình ảnh thay đổi nhau?
Việc thay đổi hình ảnh khi rê chuột tới tạo nên 1 hình ảnh sống động trong nhiều hình ảnh hơn. Thủ thuật này được khá nhiều Website, blog khác nhau sử dụng. Có thể là những blog về những mặt hàng cần giới thiệu được nhiều hình ảnh cho khách hàng thấy. Chỉ cần sử dụng 1 hiệu ứng onclick trong HTML là chúng ta có thể làm được việc đó. Với việc sử dụng code đơn giản này không hề ảnh hưởng tới tốc độ tải (Load) của site như sử dụng javasript.
Ví dụ mình có 2 ảnh sau:

Hình 1

Và

Hình 2

Và mình sử dụng Code mẫu:
<a hrefs="http://itviet360.com"><img src="IMAGE-1-LINK" onmouseover="this.src='IMAGE-2-LINK'" onmouseout="this.src='IMAGE-1-LINK'" /></a>
Trong đó:
IMAGE-1-LINK: là URL của link hình 1
IMAGE-2-LINK: Là URL của link hình 2
Ví dụ Code và kết quả minh họa
<a hrefs="http://itviet360.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHd1JaXVrRMjVEUF1Dq0NZVw9tLu1OcGimdw5JWS6eZBoVdpoE0kjMFubvFSOK75efhnvJVmMy2ID5gGVQC4jq-jS61KyKjalgQCF3mZVHKSxUgAseZbBfyR1KdowmAMb3Cr8nLJukpGvL/s640/anh-bia-fb-de-thuong-3.jpg" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfalo2Hc530qXsa7DlVgrjq57_1KmXzg_5OnBKXX76iHtF_f_WInhMYJXkiwnBkRqV1SzcxsrVXjbyopZiad5slrQw8ru3Qnf2F4i5oM_Hh0QQzj-8mfuC24rc2X5g7kWz86L6wmvN49RA/s640/anh-bia-fb-de-thuong-5.jpg'" onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHd1JaXVrRMjVEUF1Dq0NZVw9tLu1OcGimdw5JWS6eZBoVdpoE0kjMFubvFSOK75efhnvJVmMy2ID5gGVQC4jq-jS61KyKjalgQCF3mZVHKSxUgAseZbBfyR1KdowmAMb3Cr8nLJukpGvL/s640/anh-bia-fb-de-thuong-3.jpg'" /></a>
Kết quả:

---