Rungphonghovinhthanh.com
<div class="content"><font color="#000000"><span style="background-color: #ffffff;font-size:12px"><marquee onmouseover="this.stop()" onmouseout="this.start()" direction="up" scrolldelay="3" scrollamount="3"><b>
Nội dung dòng chữ chạy
</b></marquee></span></font></div>
Cách chèn:
Vào chỉnh sửa trang ---> Chèn Tiện ích khác ---> Tìm kiếm tiện ích "Embed gadget" ---> Dán code trên vào, sau đó chỉnh sửa theo ý muốn.
Lưu ý: Trong đoạn code trên:
- Font color là màu chữ.
- Background-color là màu nền.
- Font-size là kích thước chữ.
- Direction là hướng chạy.
<div class="content"><font color="#000000"><span style="background-color: #ffffff;font-size:12px"><marquee onmouseover="this.stop()" onmouseout="this.start()" direction="up" scrolldelay="3" scrollamount="3"><b>
Nội dung dòng chữ chạy
</b></marquee></span></font></div>
Code ảnh chạy:
<marquee padding: 2px; background-color="transparent !important" bgcolor="#FFFFFF" onmouseout="this.start();" onmouseover="this.stop();">
<a href="#" target="_parent" title="Mô tả đường dẫn">
<img width="145" height="80" alt="Mô tả hình ảnh" src="Đường dẫn ảnh 1"></a>
<a href="#" target="_parent" title="Mô tả đường dẫn">
<img width="145" height="80" alt="Mô tả hình ảnh" src="Đường dẫn ảnh 2"></a>
...
</marquee>
Cách chèn:
Vào chỉnh sửa trang ---> Chèn Tiện ích khác ---> Tìm kiếm tiện ích "Embed gadget" ---> Dán code trên vào, sau đó chỉnh sửa theo ý muốn.
Code html làm ảnh hoặc text chạy trên web, blog
Đầu tiên là đoạn code sẽ có cấu trúc chung như thế này:
<marquee id="marq" scrollamount="3" direction="up" loop="50" scrolldelay="0" behavior="scroll" onmouseover="this.stop()" onmouseout="this.start()"> *** </marquee>// Các thông số:
scrollamount và scrolldelay: là điều chỉnh thông số về tốc độ và thời gian.
direction: là hướng chạy của đối tượng mà ta cho chạy. có 4 hướng là: left - right - down - up
loop: là số lần lặp của đối tượng.
behavior: là hiệu ứng chạy của đối tượng, có 3 giá trị: slide - alternate - scroll
- Slide: chạy tới khi chạm lề thì dừng lại.
- alternate: chạy tới khi chạm lề thì chạy ngược lại.
- scroll: là kiểu mặt định, kiểu này tự động áp dụng vào tất cả các hình thức còn lại.
A. Áp dụng cho text.
Việc áp dụng vào text thì cũng khá đơn giản, trên phần code chung có 3 dấu sao bị bôi xanh ( *** ) là phần mà ta sẽ đưa đoạn text mà ta muốn cho chạy vào vị trí đó.
Đối với text thì ta cũng có thể thêm vào các thuốc tính như font color, style, font-color,...
Các bạn tiếp tục thay đổi các thuộc tính tùy theo sở thích của mình nhé, ví dụ ở trên là mình cho chạy từ phải sang trái (direction="left") và vòng lặp forever.
Tiếp theo là text chạy chạm lề rồi chạy ngược lại:
Text chạy lên
Text chạy xuống http://connection-all.blogspot.com
(Nhìn vui mắt quá, hjhj)
B. Áp dụng cho hình ảnh
Cũng tương tự như phần áp dụng cho text, ta chỉ việc thêm nội dung vào 3 dấu sao đó, nhưng ở đây ta thay bằng thẻ <img>.
Ví dụ để làm cho hình ảnh chạy từ dưới lên và khi ta rê chuột vào thì hình sẽ đứng lại và có link liên kết cho hình, thì ta sửa code lại thành:
<marquee id="marq" scrollamount="3" direction="up" loop="50" scrolldelay="0" onmouseover="this.stop()" onmouseout="this.start()">
<a href="Link"><img src="Link hình ảnh" title="Ghi chú cho ảnh" width="200" height="300"/> </a>
<a href="Link"><img src="Link hình ảnh" title="Ghi chú cho ảnh" width="200" height="300"/> </a>
.................................( Thêm link vào đây)
<a href="Link"><img src="Link hình ảnh" title="Ghi chú cho ảnh" width="200" height="300"/> </a>
</marquee>
Ok quá trình là như vậy, còn bên dưới là kết quả.( xem tại trang gốc ;Code html làm ảnh hoặc text chạy trên web, blog )
// Các thông số.
Cũng như các thông số ở trên, chỉ thay đổi 1 số cái như thẻ <a>, thẻ< img>
<a href="Link"> là thẻ chứa link mà khi ta click vào hình sẽ dẫn ta tới link đó, các bạn nên thêm thuộc tínhtarget="_blank" và để mở link ở cửa sổ mới.
<img src="Link hình ảnh"> đây chính là phần chèn link ảnh mà ta cần đưa vào để chạy.
title ghi chú cho từng bức ảnh, nó sẽ hiện lên khi ta trỏ chuột vào ảnh.
Các bạn cũng có thể thêm vào nó vào 1 cái table, hoặc thêm vào các thuộc tính như width, height để định dạng cố định size ảnh.
|
Thuộc tính |
Miêu tả |
|
width |
Xác định độ rộng của dòng chạy. Giá trị có thể là 10 hoặc 20% ... |
|
height |
Xác định chiều cao của dòng chạy. Giá trị có thể là 10 hoặc 20% ... |
|
direction |
Xác định chiều hướng mà marquee sẽ được cuốn. Giá trị có thể là up, down, left, hoặc right. |
|
behavior |
Xác định kiểu cuộn của dòng chạy. Giá trị có thể là scroll, slidevà alternate. |
|
scrolldelay |
Xác định khoảng thời gian dừng lại khi xong một lần cuốn. Giá trị có thể là 10…. |
|
scrollamount |
Xác định tốc độ của dòng chạy. Giá trị có thể là 10…. |
|
loop |
Xác định khoảng thời gian của vòng lặp. Giá trị mặc định là INFINITE, nghĩa là các marquee lặp đi lặp lại vô hạn. |
|
bgcolor |
Xác định màu nền, sử dụng tên màu hoặc giá trị thập lục phân của màu. |
|
hspace |
Xác định khoảng cách chiều ngang của dòng chạy. Giá trị có thể là 10 hoặc 20% ... |
|
vspace |
Xác định khoảng cách dọc của dòng chạy. Giá trị có thể là 10 hoặc 20% ... |
Dưới đây là một số ví dụ tập trung vào cách sử dụng thẻ marquee trong HTML.
Ví dụ - 1
<!DOCTYPE html>
<html>
<head>
<title>Vi du the marquee trong HTML</title>
</head>
<body>
<marquee>Hoc HTML tai VietJack - Vi du cach su dung the marquee.</marquee>
</body>
</html>
Ví dụ - 2
<!DOCTYPE html>
<html>
<head>
<title>Vi du the marquee trong HTML</title>
</head>
<body>
<marquee width="50%">Hoc HTML tai VietJack - Vi du cach su dung the marquee (width=50%)</marquee>
</body>
</html>
Ví dụ - 3
<!DOCTYPE html>
<html>
<head>
<title>Vi du the marquee trong HTML</title>
</head>
<body>
<marquee direction="right">Hoc HTML tai VietJack - Vi du cach su dung the marquee (direction="right")</marquee>
</body>
</html>
Ví dụ - 4
<!DOCTYPE html>
<html>
<head>
<title>Vi du the marquee trong HTML</title>
</head>
<body>
<marquee direction="up">Hoc HTML tai VietJack - Vi du cach su dung the marquee (direction="up")</marquee>
</body>
</html>