Thủ thuật tạo hiệu ứng hover cho hình ảnh

Như bạn thấy hiệu ứng hover cho hình ảnh với bức hình ví dụ, bình thường nó có màu đen trắng, tuy nhiên khi bạn di chuyển con chuột (mouse) tới hình ảnh thì hiệu ứng hover cho hình ảnh được kích hoạt làm bức ảnh trở thành hình ảnh có màu sắc.
Hiệu ứng trên làm cho webblog của bạn sinh động và chuyên nghiệp hơn, quả thật, lúc đầu nhìn có vẻ rất phức tạp. Tuy nhiên sau khi tìm hiểu cách thực hiện để có hiệu ứng hover trên cho hình ảnh thì phattrien@so nhận thấy tương đối đơn giản.



Hiệu ứng hình ảnh trên hoàn toàn dựa vào các đoạn code của HTML là onmouseover và onmouout để hoán đổi hình ảnh khi di chuyển chuột tới vị trí hình ảnh mà thôi.
phattrien@so sẽ hướng dẫn bạn chi tiết cách thực hiện hiệu ứng hover trên đối với hình ảnh để các bạn thực hiện với webblog của mình.

Trước tiên bạn copy đoạn code dưới và chỉnh sửa các dòng code như hướng dẫn để có được hình ảnh với hiệu ứng hover hấp dẫn trên.
Đoạn code chi tiết như sau:

<a href="URL của trang web trỏ tới khi bạn click vào hình ảnh" onmouseover="nameyourimage.src='URL hình ảnh hiệu ứng hover'" onmouseout="nameyourimage.src='URL hình ảnh trước khi có hiệu ứng hover'"><img src="URL hình ảnh trước khi có hiệu ứng hover" name="nameyourimage" border="0" /></a>

Tags: Breakingnews, Image - Icon, Khoi tao Blog