Script giúp di chuyển và thay đổi kích thước ảnh trên trang web

Chia sẻ mã nguồn và kinh nghiệm lập trình PHP, JavaScript, jQuery,...
Nội quy chuyên mục
Thành viên đăng quảng cáo trong chuyên mục này sẽ bị xóa toàn bộ bài viết và cấm vĩnh viễn tham gia Diễn đàn.

* Xem qui định đăng bài viết tại đây: Nội quy đăng bài viết
Đăng trả lời
Hình đại diện của thành viên
FreeCode
Thành viên mới
Thành viên mới
Bài viết: 7
Ngày tham gia: 10/11/2019 - 15:28

Script giúp di chuyển và thay đổi kích thước ảnh trên trang web

Gửi bài gửi bởi FreeCode » 10/11/2019 - 20:34

Thư viện JavaScript DHTML giúp bạn di chuyển (Drag & Drop) và thay đổi kích thước (Resize) ảnh trên trang web. Khi sử dụng Script này, khách truy cập có thể thay đổi kích thước hình ảnh cũng như di chuyển chúng đến bất cứ vị trí nào trên trang web của bạn.

Cách sử dụng JavaScrip DHTML Drag'nDrop:

1. Tải thư viện DHTML JavaScrip Drag'nDrop tại đây:
Sau khi tải về bạn giải nén được một tập tin tên là wz_dragdrop.js hãy đặt nó vào một thư mục nào đó trên trang web của bạn.

Chẳng hạn như nếu sử dụng trang web Joomla! thì bạn có thể đặt nó trong thư mục chưa các tập tin JavaScript của template:

Mã: Chọn tất cả

templates/tên_template_của_bạn/js
Ngoài ra còn có 1 tập tin ảnh tên là transparentpixel.gif để dùng trong việc tương thích với trình duyệt Netscape nhưng hiện không còn được sử dụng nhiều.

2. Khai báo liên kết đến Script này trong trang web của bạn như sau:

- Mở tập tin index.php trong thư mục templates/tên_template/ và dán dòng mã dưới đây vào ngay sau thẻ <body>

Mã: Chọn tất cả

<script type="text/javascript" src="templates/tên_template/js/wz_dragdrop.js"></script>
3. Tạo hiệu ứng Drag'nDrop cho Image:

Đặt tên cho hình ảnh muốn Drag'nDrop theo cú pháp sau:

Mã: Chọn tất cả

<img name="name1" src="/images/image_abc.jpg" width="240" height="135">
Trong đó:

- name là tên duy nhất, không được trùng lắp.
- Thông số widthheight là bắt buộc và phải có giá trị chính xác, không dùng giá trị %

4. Chèn mã dưới đây vào ngay phía trên thẻ </body> trong trang có hình ảnh muốn tạo Drag'nDrop cho Image:

Mã: Chọn tất cả

<script type="text/javascript">
<!--
SET_DHTML("name1");
//-->
</script>
Nếu có nhiều ảnh thì bạn cứ thêm tên của chúng vào như sau:

Mã: Chọn tất cả

<script type="text/javascript">
<!--
SET_DHTML("name1", "name2", "name3");
//-->
</script>
Khi muốn thay đổi kích thước ảnh thì bạn hãy nhấn và giữ phím Shift trên bàn phím sau đó nhấp và giữ nút trái chuột vào ảnh và kéo ra bên ngoài để phóng to ảnh hay kéo vào trong để thu nhỏ ảnh.

Khi muốn di chuyển ảnh thì bạn chỉ cần nhấp và giữ nút trái chuột vào ảnh rồi di chuyển nó đi tùy ý.

Ngoài ra bạn cón có thể tạo thêm các hiệu ứng khác với Script này.

Xem thêm hướng dẫn cách sử dụng DHTML JavaScrip Drag'nDrop tại đây: http://www.walterzorn.de/en/dragdrop/dragdrop_e.htm

Đăng trả lời
  • Các chủ đề liên quan
    Trả lời
    Xem
    Bài viết mới nhất

Quay về