[Help] Di chuyển tấm hình trên tag DIV như thế nào?

[ndp1007]

Mình có một trang HTML gồm 4 tag DIV :Banner,Center,Right và Bottom.
Mình có Source Ở đây (http://www.mediafire.com/?dzmbzqqzxml)

Trong tag DIV Center có 1 tấm hình,nó rất lớn.Giờ mình muốn xem tấm hình đó không bằng thanh cuộn(Scroll),mà bằng cách kéo thả tấm hình,nhưng nó vẫn nằm dưới tag DIV Center tứ là hiện hình theo giới hạn của tag DIV Center.Bố cục trang như hình bên dưới

http://i581.photobucket.com/albums/ss259/ndp1007/IT/Javascript_question_dropdrag_2.jpg

Mình phải cần gì và kỹ thuật xử lý như thế nào ,mong các bạn chia sẽ...
Cảm ơn các bạn đã quan tâm...!

[thuyduongcd]

<div id="center" style="overflow:scroll"><img src="...." /></div>

[nokida]

1.
<div id="center" style="overflow:hidden"><img src="...." style="cursor: pointer;"/></div>
2. Sử dụng javascript để tạo hiệu ứng drag (etc: http://script.aculo.us/)

[Truongcnt45dh]

Tạo thumb cho ảnh theo kích thước mong muốn ^_^.

[ndp1007]

1.<div id="center" style="overflow:hidden"><img src="...." style="cursor: pointer;"/></div>

Mình muốn cái Cursor đó là một file .cur thì phải làm thế nào.


Tạo thumb cho ảnh theo kích thước mong muốn ^_^.
---> Mình cho cố tình thể hiện đúng kích thước thật luôn mà...

Cảm ơn các bạn đã chia sẽ

[violetzs]

dùng thư viện JS của tui nè $T(this).drag(); http://ddth.com/images/smilies/lick.gif

[FTP]

Mình có một trang HTML gồm 4 tag DIV :Banner,Center,Right và Bottom.
Mình có Source Ở đây (http://www.mediafire.com/?dzmbzqqzxml)

Trong tag DIV Center có 1 tấm hình,nó rất lớn.Giờ mình muốn xem tấm hình đó không bằng thanh cuộn(Scroll),mà bằng cách kéo thả tấm hình,nhưng nó vẫn nằm dưới tag DIV Center tứ là hiện hình theo giới hạn của tag DIV Center.Bố cục trang như hình bên dưới

Mình phải cần gì và kỹ thuật xử lý như thế nào ,mong các bạn chia sẽ...
Cảm ơn các bạn đã quan tâm...!
Trong tag div Center chứa 1 tag div , tag div đó chứa tấm hình khổng lồ,và nó phải nằm bên dưới tất cả các tag div mà bạn đề cập ở trên qua chỉ số Z-index trong CSS.
Khi di chuyển là bạn di chuyển tag DIV chứa hình đó,và dĩ nhiên bạn sẽ thấy được phần tấm hình chỉ trong phạm vi của tag DIV Center.
Còn các hàm,và kỹ thuật đều trong Scripttatolus hay JQUERY.
Cái yêu cầu mà bạn cần đó là phần DROP và DRAG trong 2 thư viện trên.
Thân!

[Truongcnt45dh]

@thuyduongcd: Mình vẫn chưa hình dung cụ thể ra ý bạn thế nào,nếu bạn muốn xem full ảnh thì fix width bằng của thẻ Div, để height tự do và cho thẻ img khi nó to quá kích thước của thẻ Div <- làm thế này ảnh ko còn như kích thước thật của nó khi đó chất lượng ảnh là ko mong muốn. Cách khác là mở rộng chiều rộng của thẻ Div(not recommended). Thẻ Div của bạn độ rộng như hình là cố định như thế là bạn ko muốn thay đổi width của Div + hơn nữa là cái ảnh kích thước là ko xác định trước ko muốn có scroll thì e rằng ko khả thi @@. Kiểu gì cũng phải thu nhỏ width của image nếu nó to hơn: ép width or tạo thumb

[hoainguyenduc]

http://jquery.com! vô đây thì mọi vấn đề có thể sẽ dc giải quyết hết! he he!

[thuyduongcd]

@thuyduongcd: Mình vẫn chưa hình dung cụ thể ra ý bạn thế nào,nếu bạn muốn xem full ảnh thì fix width bằng của thẻ Div, để height tự do và cho thẻ img khi nó to quá kích thước của thẻ Div <- làm thế này ảnh ko còn như kích thước thật của nó khi đó chất lượng ảnh là ko mong muốn. Cách khác là mở rộng chiều rộng của thẻ Div(not recommended). Thẻ Div của bạn độ rộng như hình là cố định như thế là bạn ko muốn thay đổi width của Div + hơn nữa là cái ảnh kích thước là ko xác định trước ko muốn có scroll thì e rằng ko khả thi @@. Kiểu gì cũng phải thu nhỏ width của image nếu nó to hơn: ép width or tạo thumb

sorry! hiểu nhầm ý :)

[dokhacluan]

đã làm , demo : http://dokhacluan.ueuo.com/demo/dichuyen_anh_trong_div/
tớ tét thấy chạy on tren ie7,ff ,ie6 không bít

cái vụ cursor là cái hình ban tay thì minh khong bít , nhưng tấm hinh đã dc di chuyen trong div , cậu xem coi dung ý cau không

nếu dúng download source tại : http://www.mediafire.com/?njyjnlt2kqh

[ndp1007]

đã làm , demo : http://dokhacluan.ueuo.com/demo/dichuyen_anh_trong_div/
tớ tét thấy chạy on tren ie7,ff ,ie6 không bít

cái vụ cursor là cái hình ban tay thì minh khong bít , nhưng tấm hinh đã dc di chuyen trong div , cậu xem coi dung ý cau không

nếu dúng download source tại : http://www.mediafire.com/?njyjnlt2kqh
Mình test thêm trên Opera,IE8 mướt hơn FF và IE7
Thật tuyệt vời...! :D
Cảm ơn bạn rất nhiều.... :)

[FTP]

Cho mình hỏi cái này:Nếu tấm hình quá lớn,khi đó drag toàn bộ tấm hình đó cũng không khả thi.
Mình thấy trên trang diadiem.com (http://www.diadiem.com) họ dùng phương pháp này hay lắm hình minh họa :

http://i770.photobucket.com/albums/xx343/ftpktx/diadiemcom_noImages.jpg

Mình đã chặn load Images bằng Addon của firefox.Mới thấy được cái này.
Bản đồ là một tấm hình lớn.Nên họ cắt ra từng mảnh nhỏ,khi drag tới đâu thì Server load hình tới đó.
Kỹ thuật cũng khá hay.Có ai am hiểu về vấn đề trên không?
Mình cũng có quá nhiều thắc mắc trong vấn đề trên:
Họ thiết kế CSDL như thế nào,từng tấm hình nhỏ là một trường của một table hay họ load toàn bộ tấm bảng đồ lớn rồi dùng các hàm trong Prototype (Vì mình thấy họ dùng Prototype : http://www.diadiem.com/script/prototype.js) cắt ra

Mong có cao thủ làm rõ vấn đề trên.
Cảm ơn rất nhiều :)

[Katsumoto]

@FTP : Google Map cũng làm theo cách tương tự. Nếu cần dữ liệu ảnh vệ tinh, sao người ta không "mượn" dữ liệu của Google Map bằng ... browser nhỉ ?
Còn cách thể hiện theo mình : dùng js xác định tọa độ tâm vùng nhìn từ đó load những hình thuộc vùng nhìn.