Tạo hiệu ứng hover cho hình ảnh sinh động

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>

Các dòng mã code bạn chỉnh sửa như sau:

URL của trang web trỏ tới khi bạn click vào hình ảnh chính là địa chỉ một trang web nào đó để khi bạn click chuột vào hình ảnh với hiệu ứng hover thì sẽ truy cập vào đó. Như trong hình ảnh ví dụ trên là địa chỉ trang web của phattrien@so, khi bạn click vào hình ảnh này thì sẽ truy cập vào trang http://www.vnpressnet.com – Không tin bạn cứ thử xem.

URL hình ảnh hiệu ứng hover là hình ảnh hiện thỉ khi bạn di chuyển chuột để kích hoạt hiệu ứng Hover, như ví dụ trên chính là hình ảnh màu được hiển thị khi bạn di chuyển tới vị trí hình ảnh.

URL hình ảnh trước khi có hiệu ứng hover là hình ảnh hiện thỉ khi bạn chưa di chuyển chuột để kích hoạt hiệu ứng Hover, như ví dụ trên chính là hình ảnh đen trắng.

nameyourimage tên của hình ảnh bạn thực hiện hiệu ứng Hover, có 3 nameyourimage trong đoạn code trên, bạn cần phải thay thế nó bằng một cái tên của riêng bạn, điều này thực sự cấn thiết nếu bạn có nhiều hơn 1 hình ảnh hiệu ứng hover trong web.

Share on Facebook Share on Twitter Share on Google Plus

About Chinhnd

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.