IV. Sử dụng Image Maps với JavaScript
d. Bước thông qua Animation
Tiếp theo, tạo ra các hình ảnh động thực tế. Bạn sẽ sử dụng một Hàm gọi tiếp phải di chuyển chuột phải vị trí tiếp theo của nó, và sử dụng phương thức setTimeout phải gọi chức năng này thường xuyên.
Bước đầu tiên trong chức năng tiếp theo là tăng những hình ảnh trong ô hiện hành. Đây là định nghĩa Hàm và lệnh tăng:
function next() { cimage += 1;
Sau khi Tăng dần giá trị của cimage, script cần phải chắc chắn rằng nó đã không đi quá 8 vì có tám hình ảnh. Phần tiếp theo của kiểm tra Script cho giá trị lớn hơn 8: if (cimage > 8) { cimage = 4; document.images[cbox].src = "mouse0.gif"; cbox = (cbox + 1) % 5; nbox = (cbox + 1) % 5; }
Các Script trước đó cũng thiết lập lại cimage đến 4. (Bởi vì hộp thoại hiện hành trước đây vào hộp bên cạnh, nó đã chuyển qua hình ảnh 1, 2, và 3.)
Tiếp theo, script cần phải tính toán hình ảnh cho hộp tiếp theo, nếu có: nimage = cimage - 5;
if (nimage <= 0) nimage = 0;
Câu lệnh đầu tiên ở đây gán nimage đến năm ít hơn cimage. Nếu bạn nhìn vào những hình ảnh trong hình 13,3, bạn sẽ nhận thấy rằng hình ảnh 6, 7, và 8 kết hợp với hình ảnh 1, 2, và 3, tương ứng, hình thành một con chuột đầy đủ. Nếu kết quả phép trừ trong một giá trị âm, không nên có một hình ảnh kế tiếp, để gán 0 đến nimage.
Cuối cùng, kết thúc chức năng gán tiếp theo những hình ảnh được chỉ định bởi cimage và nimage đến các địa điểm được chỉ định bởi Cbox và nbox:
document.images[cbox].src = "mouse" + cimage + ".gif"; document.images[nbox].src = "mouse" + nimage + ".gif"; window.setTimeout("next()",100);
}
Câu lệnh cuối cùng ở đây đặt ra một thời hạn để những Hàm tiếp theo sẽ được gọi lại trong một phần mười của một giây. (Bạn có thể tăng hoặc giảm giá trị này để thay đổi tốc độ của chuột.)