Em thiết kế trong photoshop giao diện như thế này Sau đó em dùng công cụ Slice Tool của Photoshop để cắt thành các file *.gif Sau đó thì em dùng html để gắn lên web Bây giờ em muốn khi rê chuột vào menu thì xuất hiện hiệu ứng như hình bên dưới. Em có 1 file hlight.png nhưng ko biết cách nào để thực hiện hiệu ứng này. Rất mong mọi người giúp đỡ em. Em xin chân thành cảm ơn!!!
cái này bạn muốn làm thì thêm hiệu ứng flash vào, đơn giản mà bạn (trước đó vào pts làm một hình bằng với khung đó, xong rồi tô gradien cho nó)
Photo shop làm 2 cái hình khác nhau. 1 cái để hiển thị lúc bình thường, 1 cái để hiển thị khi rê chuột vào. (Lưu thành 2 hình hoặc 1 hình có cả 2 đều được). Xong dùng JS hoặc CSS để xử lý sự kiện mouse over.
Em làm vẫn chưa chạy các anh ạ. đây là đoạn code html của em. <html> <head> <style type=text/css> #menu li:hover{background: hlight.png} //file hlight.png em đặt cùng với file index.html </style> <title>PSD Tuts</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> <!-- ImageReady Slices (PSD Tuts.psd) --> <table id="Table_01" width="600" height="335" border="0" cellpadding="0" cellspacing="0"> <tr> <td colspan="6"> <img src="images/PSD-Tuts_01.gif" width="600" height="281" alt=""></td> </tr> <tr> <td> <img src="images/PSD-Tuts_02.gif" width="84" height="54" alt=""></td> <td> <a href="http://demo.vn" target="_blank"></a> <img src="images/PSD-Tuts_03.gif" width="110" height="54" alt=""></td> <td> <a href="http:/demo.com" target="_blank"> <img src="images/PSD-Tuts_04.gif" width="106" height="54" alt=""></a></td> <td> <a href="http://demo.net" target="_blank"> <img src="images/PSD-Tuts_05.gif" width="108" height="54" alt=""></a></td> <td> <a href="http://demo.info" target="_blank"> <img src="images/PSD-Tuts_06.gif" width="110" height="54" alt=""></a></td> <td> <img src="images/PSD-Tuts_07.gif" width="82" height="54" alt=""></td> </tr> </table> <!-- End ImageReady Slices --> </body> </html>
