Một trong những ứng dụng cổ điển của JavaScript là tạo ra hiệu ứng Rollover image đó là những hình ảnh sẽ thay đổi khi bạn di chuyển con trỏ chuột lên chúng. Chúng thường được sử dụng để tạo ra các liên kết chuyển hướng này đem lại cho người sử dụng một chút hướng dẫn bằng cách chọn một trong các con chuột là hơn.
Rollovers thường được sử dụng cho các những hình ảnh được liên kết. Sử dụng tính năng này, bạn có thể đánh dấu những liên kết hiện tại với một màu sắc khác nhau, biên giới, hoặc thậm chí bằng cách thay đổi hình ảnh hoàn toàn.
Bạn có thể biến một hình ảnh vào một rollover bằng cách thêm một xử lý sự kiện onmouseover thay thế hình ảnh với một phiên bản được đánh dấu và một xử lý sự kiện onMouseOut trả về hình ảnh gốc.
1. JavaScript Rollovers
Trước tiên, chúng ta hãy xem nhanh làm thế nào để tạo ra hiệu ứng Rollover bằng cách sử dụng JavaScript. Để làm điều này, bạn bắt đầu với phiên bản thường xuyên và nổi bật của từng hình ảnh rollover. Hình 3.1.1 cho thấy ví dụ của các nút điều hướng.
Đinh Quốc Cường - Sử dụng đồ họa và ảnh động
Như bạn có thể thấy, tất cả điều này đòi hỏi trong JavaScript là một kết hợp xử lý sự kiện onmouseover với một hình ảnh năng động. Thêm onMouseOut cho phép tập lệnh của bạn để khôi phục lại hình ảnh ban đầu khi con chuột di chuyển. Ví dụ 3.1.1, cho thấy một cách đơn giản để làm điều này với xử lý sự kiện nội tuyến.
Ví dụ 3.1.1. Sử dụng Rollovers JavaScript cơ bản <html> <head> <title>Rollovers - JavaScript</title> </head> <body> <h1>JavaScript Rollovers</h1> <a href="home.html" onmouseover="document.images[0].src='home2.gif';" onmouseout="document.images[0].src='home1.gif';"> <image border="0" src="home1.gif">
</a> <br>
<a href="archives.html"
onmouseover="document.images[1].src='archives2.gif';" onmouseout="document.images[1].src='archives1.gif';"> <image border="0" src="archives1.gif">
</a> </body> </html>
Đây chỉ là một chút cơ bản của dòng JavaScript, do đó bạn có thể kiểm tra nó bằng cách tải các tập tin HTML vào trình duyệt. Kết quả được thể hiện trong hình 3.1.2. Trong hình, con trỏ chuột qua nút Archives.
Lưu ý
Bạn có thể làm nổi bật hình ảnh của bạn trong cách khác - ví dụ: thay đổi màu sắc của chúng. Phương pháp khác là đặt một hình ảnh nhỏ hơn để những bên của mỗi hình ảnh đó bắt đầu ra như thay đổi trống và để thay đổi một mũi tên hoặc biểu tượng khác khi con trỏ chuột trên những hình ảnh liên kết.
2. JavaScript CSS Rollovers
Mặc dù JavaScript rollovers làm việc tốt trong các trình duyệt hiện nay, kỹ thuật này đã được phát triển trong những ngày trước khi CSS, và bây giờ có một cách tốt hơn để thực hiện điều tương tự. Sử dụng: Chỉ thị di chuột vào CSS, bạn có thể tạo liên kết văn bản là thay đổi màu sắc khi các dao động chuột lên chúng. Ví dụ 3.2.1 cho thấy một ví dụ đơn giản bị lật CSS.
Công nghệ CSS được đề cập đầu tiên bởi W3C vào năm 1996. Theo định nghĩa của W3C (Wide Web Consortium) CSS (từ viết tắt của Cascading Style Sheet tạm dịch là bảng kiểu xếp chồng) là một ngôn ngữ giúp người thiết kế web có thể add kiểu vào tài liệu web (như kiểu font chữ, màu sắc, khoảng cách vv..). Bạn có thể tạo ra kiểu một lần nhưng có thể dùng lại nhiều lần trong các tài liệu web tiếp theo.
Ví dụ 3.2.1. JavaScript-Miễn phí Rollovers với CSS <html> <head> <title>Rollovers - CSS</title> <style> #home,#archives { font-size: 30px; text-decoration: none; } #home:hover, #archives:hover { background-color: #AAAAAA; } </style> </head> <body> <h1>JavaScript-Free Rollovers</h1>
Đinh Quốc Cường - Sử dụng đồ họa và ảnh động
<a id="archives" href="archives.html"><b>Archives</b></a> </body>
</html>
Để thử ví dụ này, chỉ cần tải các tài liệu HTML vào trình duyệt. Khi bạn di chuyển chuột lên các liên kết, hình nền thay đổi màu sắc từ trắng đến màu xám. Ví dụ này được thể hiện trong hình 3.2.1.
Hình 3.2.1. Đơn giản chỉ rollover CSS.
Đây không phải kiểu như là lật JavaScript, nhưng nó có một số lợi thế:
• Đầu tiên, nó không yêu cầu JavaScript.
• Thứ hai, các liên kết được ở văn bản thực tế có nghĩa là họ sẽ làm việc ngay cả trong các trình duyệt dựa trên văn bản, trình duyệt điện thoại di động nguyên thủy, và tiếng nói-đọc các trình duyệt cho người mù, mặc dù các hiệu ứng rollover sẽ không làm việc trong 1 vài tình huống.
• Thứ ba, tải trang nhanh hơn, và bạn có thể thêm các liên kết nhiều hơn mà không tạo ra đồ họa.
3. Graphic CSS Rollovers
Giả sử bạn đang thực sự gắn liền với giao diện đồ hoạ tiện lợi của ví dụ tái đầu tư đầu tiên. Trước khi bạn làm một cái gì đó như thế, hãy xem ví dụ 3.3.1. Danh sách này sử dụng CSS để thực hiện lật đồ họa, mà nhìn và làm việc chính xác như hình 3.1.2, không có JavaScript.
Ví dụ 3.3.1. Graphic Rollovers với CSS <html> <head> <title>Rollovers - CSS</title> <style> #home { display: block; height: 60px; width: 126px;
height: 60px; width: 168px; background-image: url("archives1.gif"); } #archives:hover { background-image: url("archives2.gif"); } #home b, #archives b { display: none; } </style> </head> <body> <h1>JavaScript-Free Rollovers</h1>
<a id="home" href="home.html"><b>Home</b></a> <br>
<a id="archives" href="archives.html"><b>Archives</b></a> </body>
</html>
Dưới đây là một bản tóm tắt về cách làm việc CSS:
• Các quy tắc #home và #archives, mà phù hợp với thuộc tính id của hai liên kết, thiết lập thuộc tính hiển thị của chúng để ngăn chặn và chiều rộng và chiều cao thuộc tính cho phép các liên kết để được như lớn như đồ họa tương ứng của chúng. Sau đó, chúng sử dụng tài sản background-image để hiển thị đồ họa unhighlighted (home1.gif và archives1.gif).
• Các nhà #home:hover và #archives: các quy tắc di chuột thay đổi hình ảnh nền cho các phiên bản đánh dấu (home2.gif và archives2.gif).
• Các #home b và #archives b da quy tắc văn bản của các liên kết bên trong các thẻ <b>. Điều này ngăn cản các văn bản xuất hiện trên đầu trang của đồ họa.
Chú ý rằng, phần HTML của ví dụ này giống hệt với ví dụ trước, và nó sẽ làm việc chính xác như nhau trên các trình duyệt dựa trên văn bản và trình duyệt với JavaScript được tắt. Người dùng với các trình duyệt hiện đại sẽ thấy các phiên bản đồ họa của các liên kết thay thế. Điều này cho phép bạn nhìn bị lật đồ họa mà không cần JavaScript, và không ảnh hưởng đến khả năng tiếp cận.