Web tuần 4 - Hight Light Menu bằng JavaScript

by domauphap 3/11/2009, 00:48

Đoạn mã lệnh làm Hight Light Menu kết hợp Java Script cần xem xét 2 chỗ:
1. File main.css chưa có thì sao liên kết tới dc => Tạo file main.css
2. 2 thẻ <a> và <td> nằm sai vị trí. P tạm hiểu ý thầy là: tạo 1 ô mà nội dung của ô là 1 liên kết => đảo vị trí 2 thẻ này lại
Đoạn mã gốc của thầy:

Code:: <html> <head> <title>HightLight MENU</title> <link href="main.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> function HightLight (what, onoff) { var className = ((onoff == 1) ? 'mainmenu_over' : 'mainmenu'); what.className = className; } </script> </head> <body> <table> <tr> <a href ="www.fit.hcmus.edu.vn/efacportal/"> <td width ="200" class="mainmenu" onmouseover = "HightLight (this, 1)" onmouseout = "HightLight (this, 0)">Khoa CNTT - Truong DHKHTN </td> </a> </tr> <tr> <a href ="http://www.w3schools.com/" target="blank"> <td width ="200" class="mainmenu" onmouseover = "HightLight (this, 1)" onmouseout = "HightLight (this, 0)">W3Schools </td> </a> </tr> </table> </body> </html>

Sữa:
1. Tạo file main.css có nội dung là :

Code:: @charset "utf-8"; /* CSS Document */ .mainmenu { font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-weight: bold; color: #CC6633; text-align: center; background-color: #ECE9D8; } .mainmenu_over { font-family: Arial, Helvetica, sans-serif; font-size: 15px; font-weight: bold; color: #000000; text-align: center; background-color: #66CC33; }

Không phải ngẫu nhiên mà P đặt tên 2 class trong file main.css là mainmenu và mainmenu_over. Vì đoạn mã lệnh của thầy có chỗ

viết là: var className = ((onoff == 1) ? 'mainmenu_over' : 'mainmenu'); và chỗ này nữa: <td width ="200" class="mainmenu"

onmouseover = "HightLight (this, 1)" onmouseout = "HightLight (this, 0)">. Điều này có nghĩa là hiệu ứng onmouseover và

onmouseoout của Hight Light Menu phụ thuộc vào cách khai báo class trong file main.css
2. Đổi vị trí 2 thẻ <a> và <td>
Đoạn code thử :

Code:: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>HightLight MENU</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link href="main.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> function HightLight (what, onoff) { var className = ((onoff == 1) ? 'mainmenu_over' : 'mainmenu'); what.className = className; } </script> </head> <body> <table border="1" cellpadding="0" cellspacing="0"> <tr> <td width ="200" class="mainmenu" onmouseover = "HightLight (this, 1)" onmouseout = "HightLight (this, 0)"><a href ="http://www.fit.hcmus.edu.vn/efacportal/" target="blank">Khoa CNTT - Truong DHKHTN</a> </td> </tr> <tr> <td width ="200" class="mainmenu" onmouseover = "HightLight (this, 1)" onmouseout = "HightLight (this, 0)"><a href ="http://www.w3schools.com/" target="blank">W3Schools</a> </td> </tr> </table> </body> </html>

Download file .html và .css: http://www.mediafire.com/?e40mn3ib9xn
*** Để hiệu ứng onmouseover và onmouseoout của Hight Light Menu sinh động hơn thì ta khai báo nhìu thuộc tính trong 2 class mainmenu_over và mainmenu. Giá trị của những thuộc tính này nên đối lập nhau thì hiệu ứng sẽ càng rõ.

by sylam_113 20/11/2009, 18:48

Cảm ơn Pháp Huynh

Web tuần 4 - Hight Light Menu bằng JavaScript

Web tuần 4 - Hight Light Menu bằng JavaScript

Re: Web tuần 4 - Hight Light Menu bằng JavaScript