Code Hình Ảnh Động Phần 1

Theo kinh nghiệm .... mò mẫm trên net ,  cộng với sự học hỏi từ bạn Dunghennessy, Giaro tôi có sưu tầm một vài đoạn Code nhỏ và khá đủ các tính năng cần thiết để các bạn (chưa biết) đưa 1 hay nhiều các tấm ảnh động vào trong blog để trang trí làm đẹp , hay tạo các siêu liên kết đến các Url khác cần hướng đến... hay dùng vào các mục đích khác để cho "ngôi nhà" của mình thêm phần sinh động , và hấp dẫn ( Nếu có sơ sót gì xin các bác tiền bối bỏ qua cho - và xin hướng dẫn thêm cho Giaro cái cần bổ sung hay chỉnh sửa các đoạn code nhỏ nầy -  cho Giaro và các bạn xem "đài" thêm phần kiến thức.... Giaro xin cảm ơn.)



         1.   CODE DÁN CÁC ĐỐI TƯỢNG HÌNH ĐỘNG VÀO BLOG :

                       Đây là đoạn code:

   * 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 hình ảnh độ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




     * 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ố

<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" [ Chỉ định tốc độ chạy] ta có thể chỉnh sửa số "5" thành số khác, để 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ẻ  <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.


       

                                     







           8.  CODE HIỆU ỨNG PHÓNG TO HÌNH ẢNH KHI DI CHUỘT VÀO HÌNH ẢNH ĐANG CHUYỂN ĐỘNG

  Sau khi các bạn đả "bếp núc" thành công được 1 đoạn code như ý để dán hình ảnh vào blog của mình , và nếu còn "tham lam" hơn , thì  đây là lúc bạn tích hợp thêm vào đoạn code của mình cùng với hiệu ứng phóng to hình ảnh khi di chuột vào hình ảnh đang chạy...

                                                      DEMO.





        * Bạn vào phần " Chỉnh sửa HTML" ( trong template của blospot ) Bấm cặp phím Ctrl+F , để mở ra thanh tìm kiếm của trình duyệt , gỏ vào đó   </head>   Chèn đoạn code bên dưới vào trên thẻ đóng </head> 


<style type='text/css'>

.hovergallery img{
-webkit-transform:scale(0.8);
-moz-transform:scale(0.8);
-o-transform:scale(0.8);
-webkit-transition-duration: 0.7s;
-moz-transition-duration: 0.7s;
-o-transition-duration: 0.7s;
opacity: 1;
margin: 10px 0px 5px 0;
}

.hovergallery img:hover{
-webkit-transform:scale(1.1);
-moz-transform:scale(1.1);
-o-transform:scale(1.1);
box-shadow:0px 0px 0px space;
-webkit-box-shadow:0px 0px 0px space;
-moz-box-shadow:0px 0px 0px space;
opacity: 4;
}
</style>

     VÀ BẤM "LƯU MẨU"

        * Kế tiếp :

  Chèn Đoạn code    <div class="hovergallery">   vào trước đoạn code hình của bạn , và cuối cùng là một thẻ đóng   </div>     vào sau cùng đoạn code hình của mình. ( bạn có thể làm như thế với các hình ảnh có trước trên blog )

        * Lúc nầy thì bạn có thể đem đoạn code của mình vừa mới hoàn thành chèn vào Widget hay đưa vào bài viết được rồi . ( có thể hiệu ứng nầy sẻ không hiển thị được trên IE7)

        * Khi bạn đả dùng quen một thời gian ngắn thì bạn có thể chỉnh sửa đoạn code trên (chèn trong template) Theo cách mà bạn thích cho hiệu ứng nầy sẻ làm việc theo ý của mình ! ( vì code trên đả được chỉnh sửa 1 tí theo ý của Giaro).

•   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 "khuyến mãi" thêm các đoạn code nhỏ khó hiểu kiể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.

                                        XEM PHẦN 2


                                      Chúc các bạn thành công.