Dãy ảnh chuyển động
Tạo chữ chuyển động, ảnh chuyển động rất đơn giản bằng mã HTML, đó chính là Marquee - Một mã được các Blogger sử dụng phổ biến . Lệnh Marquee được thực hiện bằng cách sử dụng thẻ <marquee> {đối tượng}<marquee>. Lệnh marquee hiển thị tốt cả trên trình duyệt Internet Explorer thông dụng và một số trình duyệt khác với các phiên bản mới, tuy nhiên với một số phiên bản cũ của các trình duyệt này có thể hiện thị không được tốt.
Về cơ bản, đoạn mã có cú pháp như sau:
Về cơ bản, đoạn mã có cú pháp như sau:
<marquee attributes ...> {đối tượng: HTML text, img, tag } </marquee>
Các thuộc tính attributes bao gồm:
ALIGN (căn lề cho text bên trong thẻ <marquee>, đoạn text này sẽ dồn về phía mà ta định) : top, bottom, right, left, middle
HEIGHT, WIDTH (bề rộng và bề ngang của vùng Marquee): đơn vị có thể là px hoặc %
BEHAVIOR (Kiểu trượt với các lựa chọn scroll - trượt hết miền marquee và bắt đầu lại từ đầu, slide - trượt đến điểm cuối miền marquee (tính theo hướng trượt) và đứng lại tại đó, alternate - trượt qua lại): scroll, slide, alternate
DIRECTION (hướng trượt) : up, down, left, right
HSPACE, VSPACE (khoảng cách ngang và dọc giữa text xung quanh và rìa vùng Marquee)
LOOP (lặp lại số lần trượt, nếu -1 : lặp lại vĩnh viễn.): -1, n
SCROLLAMOUNT, SCROLLDELAY (đột mượt và độ nhanh chậm của text trượt. SCROLLAMOUNT càng nhỏ thì càng mượt. SCROLLDELAY càng lớn thì càng chậm.)
BGCOLOR, CLASS, STYLE (định style cho marquee thí dụ như màu nền, text bên trong,...)
ALIGN (căn lề cho text bên trong thẻ <marquee>, đoạn text này sẽ dồn về phía mà ta định) : top, bottom, right, left, middle
HEIGHT, WIDTH (bề rộng và bề ngang của vùng Marquee): đơn vị có thể là px hoặc %
BEHAVIOR (Kiểu trượt với các lựa chọn scroll - trượt hết miền marquee và bắt đầu lại từ đầu, slide - trượt đến điểm cuối miền marquee (tính theo hướng trượt) và đứng lại tại đó, alternate - trượt qua lại): scroll, slide, alternate
DIRECTION (hướng trượt) : up, down, left, right
HSPACE, VSPACE (khoảng cách ngang và dọc giữa text xung quanh và rìa vùng Marquee)
LOOP (lặp lại số lần trượt, nếu -1 : lặp lại vĩnh viễn.): -1, n
SCROLLAMOUNT, SCROLLDELAY (đột mượt và độ nhanh chậm của text trượt. SCROLLAMOUNT càng nhỏ thì càng mượt. SCROLLDELAY càng lớn thì càng chậm.)
BGCOLOR, CLASS, STYLE (định style cho marquee thí dụ như màu nền, text bên trong,...)
Ví dụ:
Với 3 bức hình đang hiễn thị được lưu trữ tại địa chỉ màu cam (Dòng số màu xanh lá 1. 2. 3.).
Địa chỉ đích tới được mở ra khi click vào hình đang ở dòng màu nâu ở dưới (Dòng số màu xanh lá 1. 2. ).
direction="left" – Các bức ảnh sẽ chuyển động từ bên trái qua phải. Ta có thể thay bằng direction= “up” (chạy lên), direction= “dow” (chạy xuống), direction= “right” (chạy bên phải qua)
scrollamount="2" – độ mượt của các hình ảnh (càng nhỏ càng mượt)
scrolldelay="50" – Độ nhanh chậm của tốc độ trượt (càng lớn càng chậm)
onmousemove="this.stop()" onmouseout="this.start() thể hiện tính năng khi rà chuột vào marquee
(onmouseover) - Đoạn text hay hình ảnh đang chuyển động tạm dừng khi rê chuột tới.
direction="left" – Các bức ảnh sẽ chuyển động từ bên trái qua phải. Ta có thể thay bằng direction= “up” (chạy lên), direction= “dow” (chạy xuống), direction= “right” (chạy bên phải qua)
scrollamount="2" – độ mượt của các hình ảnh (càng nhỏ càng mượt)
scrolldelay="50" – Độ nhanh chậm của tốc độ trượt (càng lớn càng chậm)
onmousemove="this.stop()" onmouseout="this.start() thể hiện tính năng khi rà chuột vào marquee
(onmouseover) - Đoạn text hay hình ảnh đang chuyển động tạm dừng khi rê chuột tới.
(onmouseout) - Đoạn text hay ảnh lại tiếp tục chuyển động khi rời rê chuột khỏi nó
height="100" width="100%": Thể hiện chiều cao và độ rộng của Marquee.
height="100" width="100%": Thể hiện chiều cao và độ rộng của Marquee.
behavior="alternate" – Các bức ảnh hoặc các đoạn văn sẽ trược qua lại hay lên xuống. Nếu ta không thích kiểu trược này thì ta có thể thay thế bằng behavior=“scroll” (Trượt hết miền marquee và bắt đầu lại). behavior= “slide” ( Trượt đến điểm cuối của miền marquee và dừng lại ).
Nếu không muốn chế độ này thì ta thay behavior=”0”. Hoăc xoá nó đi.
Đoạn code ví dụ:
<marquee onmouseout="this.start()" direction="up" behavior="0" scrollamount="2" scrolldelay="50" onmouseover="this.stop()" height="100" width="100%">
1. <a href="http://picasaweb.google.com/lh/photo/I88KlLAevZb18-hLz1cGUg?feat=embedwebsite" title="cafedongduong"><img src="http://lh6.ggpht.com/_jQec837QdLE/TMb4HIBrndI/AAAAAAAAIec/ohza4bumWso/s144/118zs6v.jpg" height="101" width="144" /></a>
<br/>
2. <a href="http://cafedongduong.blogspot.com" title="cafedongduong"><img src="http://lh6.ggpht.com/_jQec837QdLE/TMb4HIBrndI/AAAAAAAAIec/ohza4bumWso/s144/118zs6v.jpg" height="101" width="144" /></a>
<br/>
3. <img src="http://lh6.ggpht.com/_jQec837QdLE/TMb4HIBrndI/AAAAAAAAIec/ohza4bumWso/s144/118zs6v.jpg" height="101" width="144" title="cafedongduong" />
</marquee>
Nói thêm:
Ở dòng ( 1. 2. và 3. ) đều có chung 1 tấm hình cùng 1 địa chỉ ở dòng màu cam.
. Ở dòng 1. là địa chỉ đích tới được mở ra còn nguyên thuỷ của nó được mở ra khi ta click tới (dòng màu nâu).
. Ở dòng 2. là địa chỉ đích tới đã được chỉnh sửa khi ta click chuột tới nó sẽ mở ra trang blog của tôi là: cafedongduong.blogspot.com (dòng màu nâu).
. Ở dòng 3. là không có địa chỉ đích tới khi click chuột vào nó sẽ không link tới vì tôi đã bỏ hẵn thẻ tap <a href=”…..”></a>.
Ở trên 3 dòng code được thể hiện cho 3 tấm hình hàng dọc thẳng đứng từ trên xuống nên ở cuối mỗi dòng đều có thẻ <br/> trừ hàng cuối cùng là không có. Nếu muốn hình nó thể hiện nằm ngang ta bỏ thẻ <br/> đi.
Thẻ title=”cafedongduong” được thêm vào cuối dòng của bên trong thẻ<a href=”…..” title=”cafedongduong”></a> để khi ta rê chuột tới nó sẽ hiển thị ra tên chủ đề là cafedongduong. Ta có thể thay tên chủ đề của nó trong giữa 2 dấu ngoặc kép “…”
Nếu ta muốn khi ta click vào đối tượng hình hay văn bản để cho nó mở ra 1 một tap cửa sổ mới thì ta thêm thẻ target=”_blank” vào cuối dòng thẻ <a herf=”……” target=”_blank”></a>. Xem ở dòng 1. và 2. của văn bản chuyễn động phía dưới:
Dòng 1. không có thẻ target=”_blank” nên khi click tới nó chỉ mở ra trên cùng 1 trang. Còn dòng 2. có thẻ target=”_blank” khi click tới nó sẽ mở ra 1 tap của sổ mới.
Văn bản Chuyễn đông
Ví dụ:
Ví dụ:
<marquee onmouseout="this.start()" direction="up" behavior="0" scrollamount="2" scrolldelay="50" onmouseover="this.stop()" height="100" width="100%">
1. <a href="#h1"><b>Nội dung được link</b></a> <br/>Noi dung thể hiện rút gọn của nôi dung được link .<a href="#h1.2" style="color:red" title="cafedongduong">Chi tiet (= Nôi dung được link)</a>
<br/>
2. <a href="#h1" title="cafedongduong" target="_blank"><b> Nội dung được link </b></a> <br> Noi dung thể hiện rút gọn của nôi dung được link.<a href="#h1.2" title="cafedongduong" style="color:red" target="_blank">Chi tiet(= Nôi dung được link)</a>
</marquee>
Nói thêm:
Ta thay line của mình cần vào các chử màu nâu: #h1 và #h.2
Ta thay line của mình cần vào các chử màu nâu: #h1 và #h.2
#h1 Là địa chỉ để link toàn bộ văn bản được mở ra tới đó khi ta click vào chử Nội dung được link
#h1.2 Là địa chỉ để link toàn bộ văn bản được mở tới đó khi ta click vào chử Chi tiết ( = Nội dung được link)
Nôi dung được link và chi tiết ( = Nôi dung được link ) thường là chung 1 địa chỉ link.
Ta có thể copy đoạn code trên dán vào bảng test HTML này và xem thử CLICK VÀO ĐÂY
Không có nhận xét nào:
Đăng nhận xét