Ảnh rõ hơn khi rê chuột vào, một ứng dụng của Javascript

[FĐ's BlOg] - Hôm nay mình xin giới thiệu 1 đọan code nhỏ để tạo hiệu ứng cho ảnh khi rê chuột vào. Thích hợp cho việc tạo các icon liên kết dạng ảnh.

Với thủ thủ thuật nhỏ này, ban đầu ảnh sẽ được làm mờ đi, khi ta rê chuột vào thì ảnh sẽ rõ lên (hoặc có thể ngược lại, tùy bạn hiệu chỉnh code)

Dưới đây sẽ là ví dụ cho bạn thấy:
☼Code:

<img
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" style="opacity:0.4;filter:alpha(opacity=40)" src="Link ảnh" />

- Nếu bạn muốn làm mờ ảnh hơn thì thay số 40 (0.4) nhỏ lại. (ví dụ 30 (0.3) )
- Nêu muốn tạo liên kết khi nhấp chuột vào thì thêm lệnh bên dưới vào trong thẻ:

onclick="window.location.href='link liên kết'"

- Như vậy code sẽ trông như thế này:

<img
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" style="opacity:0.4;filter:alpha(opacity=40)" src="Link ảnh" onclick="window.location.href='link liên kết'"/>

- Hoặc có thể làm theo cách cơ bản sau:

<a href="link liên kết">
<img
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" style="opacity:0.4;filter:alpha(opacity=40)" src="Link ảnh"/>
</a>

☼ Demo:



Chúc các bạn thành công.

Enter your mail address: