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("prototype","1.6.0.3");
google.load("scriptaculous", "1.8.2");
</script>
<script type='text/javascript' src='http://www.google.com/jsapi'/>
<script type='text/javascript' >
google.load("prototype","1.6.0.3");
google.load("scriptaculous", "1.8.2");
</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>
Đ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>
<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.
{ 0 comments... read them below or add one }
Post a Comment