• Tư vấn điều trị
      bệnh khàn tiếng


    www.trikhantieng.com

    Liên hệ + 0913163316

BlogList111

Việt Nam Gia Phả, nơi lưu trữ Gia Phả của người Việt Nam  Kiến thức Blogspot Ngonluanho: Nhung cau chuyen thap lua-Tin-Cay-Men Vngreenzone Là một nơi chia sẻ kinh nghiệm làm blogger - Nơi tôn vinh tâm hồn blogger Việt

Kéo và thả hình ảnh và các thành phần khác

2
11/01/2011

Chúng ta đã biết cách kéo tiện ích qua bài viết này. Áp dụng rộng hơn với sự hỗ trợ của thư viện Scriptaculous, chúng ta có thể tạo thủ thuật kéo và di chuyển hình ảnh và các thành phần khác. Thủ thuật này áp dụng cho cả website thông thường và blogspot.

Bước đầu tiên là đặt đoạn code sau đây vào trước thẻ </head>. (Nếu trong Template của bạn đã có đoạn code này rồi thì không cần thêm vào)

<!-- Prototype and Scriptaculous-->
<script type='text/javascript' src='http://www.google.com/jsapi'/>
<script type='text/javascript' >
google.load(&quot;prototype&quot;,&quot;1.6.0.3&quot;);
google.load(&quot;scriptaculous&quot;, &quot;1.8.2&quot;);
</script>

Bước tiếp theo, bạn cần đặt id cho hình ảnh, ví dụ image1, image2, image3, … và sử dụng cấu trúc như sau cho hình ảnh.

<img id="image1" style="cursor:move; border:0px;" src="URL_hình ảnh 1"/><script type="text/javascript">new Draggable('image1');</script>

Nếu bạn áp dụng cho nhiều hình ảnh trong đó có đoạn text chú thích cho hình ảnh thì sử dụng cấu trúc như sau.

<div style="margin: 0px auto; text-align: center;"><img id="image2" style="border: 0px none ; margin: 0px auto; cursor: move;" src="URL_hình ảnh 2" /> <img id="image3" style="border: 0px none ; margin: 0px auto; cursor: move;" src="URL_hình ảnh 3" />
Đoạn text chú thích</div>
<script type="text/javascript">new Draggable('image2');new Draggable('image3');</script>


Nếu bạn muốn áp dụng cho một đoạn text thông báo thì bạn cần đặt tên id cho nó là div1 và sử dụng cấu trúc sau.

<div id="div1" style="border: 2px solid rgb(0, 0, 0); margin: 0px 0px 10px; padding: 4px; background: rgb(220, 220, 220) none repeat scroll 0% 0%; float: right; cursor: move; width: 250px; height: 60px; color: rgb(0, 0, 255); text-align: justify;">Đây là nội dung đoạn text thông báo.</div><script type="text/javascript">new Draggable('div1');</script>

Ngoài ra, bạn còn có thể áp dụng cho liên kết bằng hình ảnh và sử dụng cấu trúc sau đây.

<img id="image0" style="cursor:move; border:0px;" ondblClick="javascript:window.open('URL_liên kết cho hình ảnh')" src="URL_hình ảnh"/>
<script type="text/javascript">new Draggable('image0');</script>

Chú ý, các id cho hình ảnh cần được đặt kèm theo số thứ tự để tránh sự trùng lắp dẫn đến thủ thuật kéo không hoạt động được.

{2 bình luậnAdd yours ?}

11:07:00, 11 thg 1, 2011

Bác ơi giúp em với cái comment blog em bị lỗi gì rồi nó ko hiện avart nữa hồi đó còn hiện bây giờ thì ....

Reply
11:13:00, 11 thg 1, 2011

Minh Quân khi Edit Template ở chế độ mở rộng mẫu tiện ích, copy toàn bộ code của Template rồi lưu file txt (chú ý Encoding chọn UTF-8) gửi qua email: huynhathawave@yahoo.com cho tớ chẩn đoán nhé

Reply
Nội quy! Đóng lại Khi bạn viết bình luận, cần tuân thủ một số quy tắc sau:
» Bình luận phải nghiêm túc và không chứa các liên kết quảng cáo.
» Có thể sử dụng các thẻ <b> … </b>,<i> … </i>, <a href="URL..."> ... </a>.
» Yêu cầu thủ thuật tại mục Yêu cầu thủ thuật hoặc hỏi tại mục Hỏi và Đáp.
More →
Chữ đậm Chữ nghiêng Chữ nghiêng 2 Chèn Link Chèn Link Mã hóa code Help ?Nhấn vào biểu tượng hoặc kiểu chữ hoặc chèn link sau đó nhấn nút Chọn rồi copy (Ctrl + C) để paste (Ctrl + V) vào khung viết bình luận. Mã hóa code nếu bạn muốn đưa code vào bình luận.

Chọn Xóa

Next post: Bài đăng Mới hơn

Previous post: Bài đăng Cũ hơn