1. CODE DÁN CÁC ĐỐI TƯỢNG HÌNH ĐỘNG VÀO BLOG :
Đây là đoạn code:
<a href="#" title="#"><img src="#" style="position: fixed; top: 0px; Z-INDEX: 1; right: 0px" align="right" />
</a>
Giải thích đoạn code trên:* Thay dấu # ở trong đoạn (<a href="#">)bằng link trang - nơi muốn trỏ đến khi ta lick chuột vào hình động , Nếu không cần trỏ đến đâu thì thì ta có thể bỏ đoạn nầy đi .
* Thay dấu # ở trong đoạn (<img src="#" border="0">)bằng link hình động mà ta muốn hiển thị trên blog.
* Cắt bỏ chử "fixed" trong đoạn (position: fixed;) nếu bạn không muốn hình ảnh luôn ở một vị trí cố định khi ta kéo thanh trượt của trình duyệt wed.
* Thay giá trị "0px" trong trong đoạn (top: 0px) để di chuyển hình ảnh lên hay xuống so với vị trí ban đầu của nó. ( Nếu bạn bỏ đi vị trí cố định hình ảnh -fixed- Ở dòng trên , thì có thể phần nầy sẻ không có hiệu lực.)
* Thay số (1) bằng số (0) trong đoạn (Z-INDEX: 1) nếu bạn không muốn hình ảnh nổi lên trên các đối tượng hình ảnh khác.
* Thay (right) bằng (left) trong đoạn (right: 0px" align="right) nếu bạn muốn hình ảnh của mình hiển thị ở vị trí bên trái của trang. Thay số (0px) bằng số khác khi muốn xê dịch hình ảnh sang trái hay phải ( nếu đặt ở vị trí cố định hình ảnh).
2. CODE DÁN CÁC ĐỐI TƯỢNG HÌNH ĐỘNG (Không chuyển động) VÀO BLOG
<a href="#"><img src="#" border="0"></a>
* Thay dấu # ở trong đoạn (<a href="#">)bằng link trang - nơi muốn trỏ đến khi ta ấn chuột vào các đối tượng hình động. Nếu không cần trỏ đến đâu thì thì ta có thể bỏ đoạn nầy đi cho đở rối.
*Thay dấu # ở trong đoạn (<img src="#" border="0">)bằng link chử hay số động mà ta muốn hiển thị trên blog.
* Trên là đoạn code chỉ hiển thị được một đối tượng , nếu muốn hiển thị nhiều đối tượng hơn nửa thì ta chỉ việc thêm vào bấy nhiêu đoạn code trên kết nối vào nhau .
Ví dụ : hiển thị 5 chử hay số
<a href="#"><img src="#" border="0"></a>
<a href="#"><img src="#" border="0"></a>
<a href="#"><img src="#" border="0"></a>
<a href="#"><img src="#" border="0"></a>
<a href="#"><img src="#" border="0"></a>
hay là :
<a href="#"><img src="#" border="0">
<a href="#"><img src="#" border="0">
<a href="#"><img src="#" border="0">
<a href="#"><img src="#" border="0">
<a href="#"><img src="#" border="0">
</a></a></a></a></a>
* Nếu muốn hiển thị hình ảnh nầy ở khoảng giửa của vị trí đặt code , chỉ cần thêm thẻ mở (<center>) vào đầu đoạn code, và thẻ đóng (</center>) vào cuối đoạn code là được .
<center><a href="#"><img src="#" border="0"></a></center>
DEMO.
3. CODE DÁN CÁC ĐỐI TƯỢNG HÌNH ĐỘNG ( Chuyển động) VÀO BLOG
<marquee behavior="scroll" direction="left" scrollamount="5" width="100%"><a href="#"><img src="#" border="0"></a> </marquee>
* Thay số (5) trong đoạn (scrollamount="5") bằng số nhỏ hơn nếu ta muốn đối tượng sẻ có tốc độ chạy chậm lại - và ngược lại.
* Thay (left) bằng (right) trong đoạn ( direction="left") nếu bạn muốn đối tượng chạy từ trái sang phải.
* Thay dấu # ở trong đoạn (<a href="#">)bằng link trang - nơi muốn trỏ đến khi ta ấn chuột vào chử hay số động. Nếu không cần trỏ đến đâu thì thì ta có thể bỏ đoạn nầy đi, cho đở bị lổi khi dán link vào.
*Thay dấu # ở trong đoạn (<img src="#" border="0">)bằng link chử hay số động mà ta muốn hiển thị trên blog.
* Thay giá trị hơn 100% trong đoạn (<marquee width="100%") nếu bạn muốn đối tượng tràn ra khung mặc định nơi vị trí đặt code - và ngược lại.
*Trong đoạn (behavior="scroll") bạn có thể thay "scroll" bằng "slide" nếu muốn đối tượng chạy theo một hướng rồi dừng lại - thay bằng "alternate" nếu muốn đối tượng chạy đổi hướng khi chạm vào biên.
* Trên là đoạn code chỉ hiển thị được một đối tượng , nếu muốn hiển thị nhiều đối tượng hơn nửa thì ta chỉ việc thêm vào bấy nhiêu đoạn code trên kết nối vào nhau , (như trên đả viết).
Ví dụ : hiển thị 5 chử hay số
<marquee width="100%" behavior="scroll" scrollamount="5" direction="left">
<a href="#"><img border="0" src="#"/></a><a href="#"><img border="0" src="#"/></a>
<a href="#"><img border="0" src="#"/></a>
<a href="#"><img border="0" src="#"/></a>
<a href="#"><img border="0" src="#"/></a></marquee>
DEMO.
4. CODE ĐIỀU CHỈNH KÍCH THƯỚC CỦA CÁC ĐỐI TƯỢNG HÌNH ẢNH ĐỘNG
Khi mà các đối tượng hình động muốn chèn vào blog , nó lại có kích thước To hoặc Nhỏ quá so với ý thích của bạn thì ta có thể chỉnh sửa lại kích thước cho nó ! với đoạn code sau :
<marquee behavior="scroll" direction="left" scrollamount="5" width="100%"><img border="0" height="45_px" src="#" style="width: 45px;" /><img border="0" height="45_px" src="#" style="width: 45px;" /><img border="0" height="45_px" src="#" style="width: 45px;" /><img border="0" height="45_px" src="#" style="width: 45px;" /><img border="0" height="45_px" src="#" style="width: 45px;" /></marquee>
*Thay dấu # ở trong các đoạn ( src="#")bằng link các đối tượng hình động mà ta muốn hiển thị trên blog.
* Thay số hiển thị kích thước chiều cao và chiều rộng của đối tượng hình ảnh bằng "px" [ Trong phần Demo được đặt ở kích thước "45px" ] ở trong đoạn ("width:45px;" và height="45_px" ).
* Về phần hướng , kiểu và tốc độ chuyển động bạn củng thay đổi theo ý của mình như đả nói ở trên.
* Code có thể chèn trực tiếp vào bài viết - trong phần "Chỉnh sửa HTML".
DEMO.
5. CODE ĐỨNG LẠI KHI DI CHUỘT VÀO HÌNH , CHUYỄN ĐỘNG TIẾP KHI RÊ CHUỘT RA KHỎI CÁC ĐỐI TƯỢNG HÌNH ĐỘNG.
<marquee behavior="alternate" onmouseout="this.start();" onmouseover="this.stop();" scrollamount="5" width="100%"><img border="0" height="45_px" src="#" style="width: 45px;" /><img border="0" height="45_px" src="#" style="width: 45px;" /><img border="0" height="45_px" src="#" style="width: 45px;" /><img border="0" height="45_px" src="#" style="width: 45px;" /> <img border="0" height="45_px" src="#" style="width: 45px;" /> </marquee>
* Bạn thay các dấu # , chiều rộng - chiều cao , hướng , kiểu và tốc độ chuyễn động như đả nói ở các phần trên.
* Code củng có thể chèn trực tiếp vào bài viết - trong phần "Chỉnh sửa HTML".
DEMO.
6. CODE CHUYỄN ĐỘNG ĐỐI TƯỢNG HÌNH ẢNH NẰM NGANG TRƯỢC 2 HƯỚNG KHÁC NHAU.
<marquee behavior="scroll"direction="left" onmouseout="this.start();" onmouseover="this.stop();" scrollamount="5" width="100%"><img border="0" height="45_px" src="#" style="width: 45px;" /><img border="0" height="45_px" src="#" style="width: 45px;" /><img border="0" height="45_px" src="#" style="width: 45px;" /><img border="0" height="45_px" src="#" style="width: 45px;" /> <img border="0" height="45_px" src="#" style="width: 45px;" /> </marquee>
<marquee behavior="scroll"direction="right" onmouseout="this.start();" onmouseover="this.stop();" scrollamount="5" width="100%"><img border="0" height="45_px" src="#" style="width: 45px;" /><img border="0" height="45_px" src="#" style="width: 45px;" /><img border="0" height="45_px" src="#" style="width: 45px;" /> </marquee>
* Ở đoạn code nầy ta dùng 2 thè <MARQUEE>. Hàng trên là code là hiển thị 5 đối tượng , hàng bên dưới chỉ định hiển thị 3 đối tượng.
* Củng như trên , bạn thay các dấu # , chiều rộng - chiều cao , hướng , kiểu và tốc độ chuyễn động củng như bao nhiêu đối tượng hình ảnh được hiển thị như ý muốn của mình.(Lưu ý : trong phần { scrollamount="5"} ta có thể sử dụng số thập phân ví dụ "5.4" hay"5.43" chẳng hạn, để 2 phần hiển thị với chiều rộng không bằng nhau sẻ cùng xuất hiện 1lúc từ 2 hướng khác nhau.)
* Nếu không muốn hình ảnh dừng lại khi rê chuột vào ảnh thì cắt bỏ đoạn ( onmouseout="this.start();" onmouseover="this.stop();" ).
DEMO.
7. CODE CHUYỄN ĐỘNG CÁC ĐỐI TƯỢNG HÌNH ẢNH NẰM DỌC .
* Tất cả đều như trên chỉ có điều là bạn phải đặt thêm 1 thẻ đóng <br/> chỉ định xuống dòng cho một đối tượng hình ảnh , chèn vào sau code của từng hình ảnh được hiển thị kế tiếp.
<img border="0" height="45_px" src="#" style="width: 45px;" />
thành là :
<img border="0" height="45_px" src="#" style="width: 45px;" /><br/>
DEMO.
- LƯU Ý : Trong quá trình thực hiện bạn phải tập trung và cẩn thận không để sai sót , để có thể thành công như mong muốn - Nếu khi thực hiện chính xác mà không hiển thị được bạn vào lại nơi chèn code xem Trình duyệt wed có tự động thêm các đoạn code nhỏ khó hiểu như "%20" hay "%OA"....Trên đầu hay cuối các đường link hình của mình hay không - Nếu có thì hảy cẩn trọng xóa bỏ chúng là được .
- Bạn có thể vào ACHRO Hay THƯ VIỆN ẢNH Để lấy hình ảnh về sử dụng cho mình.
Chúc các bạn thành công.
0 nhận xét :
Đăng nhận xét