Is there a specific part that's inconceivable? I can imagine one way to do it--probably very similarly to how Facebook does it--which follows.
Markup-wise, the containing div + image must look roughly like <div id="thumb-container" style="width: 50px; height: 50px; overflow: hidden; position: relative;"> <img id="small-profile-img" style="position: absolute;" src="small- profile.jpg" alt="small profile picture" /> </div> The JavaScript watches for click-dragging on #small-profile-img, and sets #small-profile-img's 'top' and 'left' style attributes as needed, so long as height > height+top > 50 and width > width+left > 50 (since some part of the image must cover the 50x50 viewport). Since the image is inside a div with hidden overflow, it can only be seen in the 50x50 viewport of the parent. Once you click submit, the top and left positions are sent to a serverside page that handles the actual thumbnail-making. ImageMagick would work. I hope this overview helps some missing concept click. On Mar 6, 8:03 pm, juan-i <holamellamoju...@gmail.com> wrote: > I just can't figure that out! > On FB, you get to change the thumnail for your profile picture. > You have a containing div with dimensions of about 50x50 and you can > move the image (which is actually bigger) inside that containing div > until it displays what you want. > > Ideas?
