Bài 10. HỌC HTML | TẠO VÀ XỬ LÝ CÁC TẦNG

Hôm nay chúng ta sẽ chuyển sang nội dung mới "Tạo và xử lý các tầng"

1. Sự kiện thường dùng.

Sự kiện Click chuột (onClick) được kích hoạt khi chuột được click
Sự kiện di chuyển chuột vào bên trong phần tử (onMouseOver) được kích hoạt khi chuột di chuyển chuột từ ngoài vào trong phần tử.
Sự kiện di chuột ra ngoài (onMouseOut) được kích hoạt khi di chuyển chuột từ bên trong phần tử ra khỏi phần tử.x
Sự kiện nhấn phím (onKeyUp) được kích hoạt khi người dùng nhấn một phím.

2. Thay đổi thuộc tính của các phần tử HTML.

Để thay đổi thuộc tính của một phần tử HTML nào đó trong trang bằng lệnh JavaScript, bạn viết như sau:

    document.all.<Giá trị ID của thẻ>.style.<Tên thuộc tính> = <Giá trị mới>
Trong đó:

<Giá trị ID của thẻ> chính là giá trị mà bạn đặt cho thuộc tính ID, ví dụ:

<H2  ID = ‘TieuDe’> THAY ĐỔI THUỘC TÍNH CỦA THẺ </H2> thì <giá trị ID của thẻ> trong trường hợp này sẽ là ‘TieuDe’.

<Tên thuộc tính> là tên thuộc tính cần thay đổi. Bạn có thể tra trong tài liệu đã được giáo viên phát: “Danh sách các thuộc tính”. Ví dụ : text-align, font-size, color v.v…

<Giá trị mới> là những giá trị hợp lệ cho thuộc tính cần thay đổi. (Bạn cũng tra trong tài liệu “Danh sách các thuộc tính”).

** Lưu ý: Nếu bạn muốn thay đổi thuộc tính của một phần tử thì bắt buộc bạn phải gán cho thẻ đó một giá trị ID duy nhất (Như ví dụ ở trên).

3. Định nghĩa tầng trong IE và Netscape

+  Định nghĩa tầng trong IE

Để định nghĩa tầng trong IE, bạn chỉ cần đặt thuộc tính position cho style.

Ví dụ: <H2 style = “position:absolute;”>Thẻ H2 này được đặt trên một tầng </H2>

Tuy nhiên, với cách định nghĩa ở trên thì mỗi tầng chỉ chứa được một phần tử. Nêu bạn muốn một tầng chứa được nhiều hơn một phần tử thì bạn định nghĩa tầng bằng cặp thẻ <DIV> hoặc <SPAN> như sau:

<DIV ID = ‘Tang1’ style = “position:absolute”>
    <Đặt các phần tử khác vào đây, ví dụ : >
    <H1> Phần tử này nằm trên tầng 1 </H1>
    <input type = button value = “Move”>
    <img src = “file://c:/anh1.jpg”>
    <a href = “http://www.echip.com.vn”> Trang chủ của báo E-Chip </a>
</DIV>

Mỗi tầng khi tạo ra, bạn nên gán thuộc tính ID cho tầng đó một giá trị duy nhất (Không trùng với ID của bất kỳ thẻ nào trong trang). Bạn hoàn toàn có thể thực hiện các thao tác đối với tầng như :

•    Ẩn tầng, ví dụ : document.all.Tang1.style.visibility = ‘hidden’
•    Hiện tầng, ví dụ : document.all.Tang1.style.visibility = ‘visible’
•    Di chuyển tầng sang trái 5 pixel, ví dụ: document.all.Tang1.style.pixelLeft -= 5
•    Di chuyển tầng sang phải 5 pixel, ví dụ: document.all.Tang1.style.pixelLeft += 5
•    Di chuyển tầng lên trên 5 pixel, ví dụ: document.all.Tang1.style.pixelTop -= 5
•    Di chuyển tầng xuống dưới 5 pixel, ví dụ: document.all.Tang1.style.pixelTop+=5

+ Định nghĩa tầng trong Netscape

Trong Netscape, việc định nghĩa (tạo ra) tầng có phần dễ dàng hơn với thẻ LAYER :

<LAYER name = “Tang1”>
    <Đặt các phần tử khác vào đây, ví dụ : >
    <H1> Phần tử này nằm trên tầng 1 </H1>
    <input type = button value = “Move”>
    <img src = “file://c:/anh1.jpg”>
    <a href = “http://www.manguon.com”> Trang chứa nhiều mẹo vặt về IT </a>
</LAYER>

* Để ẩn / hiện tầng được tạo bởi thẻ LAYER thông qua lệnh JavaScript, bạn viết : 

document.<Tên của tầng>.visibility = 'hidden'  (để ẩn tầng)
document.<Tên của tầng>.visibility = 'show'  (để hiện tầng)

Trong đó : <Tên của tầng> chính là giá trị của thuộc tính name.

**Lưu ý: Để truy cập đến một tầng, trong IE sử dụng giá trị của thuộc tính ID, trong khi đó Netscape sử dụng giá trị của thuộc tính name.

Ví dụ : document.Tang1.visibility = 'hidden' Để ẩn tầng có tên là Tang1 tạo ra ở trên.

*  Để di chuyển tầng bằng JavaScript, bạn viết:

document.<Tên tầng>.left = <Giá trị>  (Di chuyển sang trái hoặc phải)
document.<Tên tầng>.top = <Giá trị>  (Di chuyển lên | xuống)

Trong đó: <giá trị> âm để di chuyển lùi, giá trị dương để di chuyển tiến.

 Ví dụ di chuyển tầng lên trên thêm 10 pixel
document.Tang1.top -= 10

Ví dụ di chuyển tầng sang phải thêm 10 pixel
document.Tang1.left += 10

Ví dụ, di chuyển tầng đến vị trí cách mép trên cửa sổ trình duyệt 100px, và cách mép trái 50 pixel.
document.Tang1.top = 100
document.Tang1.left = 50

Với nội dung trên các bạn sẽ thay đổi được thuộc tính của một phần tử HTML khi có các sự kiện chuột và bàn phím xảy ra. Các bạn sẽ định nghĩa đươc các tầng (Layer) trong IE và Netscape. Biết cách làm ẩn, hiện tầng bằng các lệnh JavaScript. Các bạn có thể tạo một menu liên kết đến các trang khác sử dụng tầng.

Để tìm hiểu kỹ hơn về HTML và tạo web với HTML các bạn có thể tham khảo nội dung của khóa học sau: HTML& CSS
 
Mọi thông tin liên hệ: Ms Lâm