Since I can't master the subject, I'm not sure if it's CSS or JS related. Here's my problem; I have a script to upload, crop and save image. The problem is I want to put the thumbnail preview under the image but I can't. Here are the codes:
These are in the head part
<script type="text/javascript" src="js/jquery-pack.js"></script>
<script type="text/javascript" src="js/jquery.imgareaselect.min.js"></script>
<script type="text/javascript">
function preview(img, selection) {
var scaleX = 100 / selection.width;
var scaleY = 100 / selection.height;
$('#thumbnail + div > img').css({
width: Math.round(scaleX * 500) + 'px',
height: Math.round(scaleY * 375) + 'px',
marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px',
marginTop: '-' + Math.round(scaleY * selection.y1) + 'px'
});
$('#x1').val(selection.x1);
$('#y1').val(selection.y1);
$('#x2').val(selection.x2);
$('#y2').val(selection.y2);
$('#w').val(selection.width);
$('#h').val(selection.height);
}
$(window).load(function () {
$('#thumbnail').imgAreaSelect({ aspectRatio: '16:9', onSelectChange: preview });
});
</script>
This is in the body part
<div align="center">
<img src="resized_pic.jpg" style="float: left; margin-right: 10px;" id="thumbnail" alt="Create Thumbnail" />
<div style="float:left; position:relative; overflow:hidden; width:160px; height:90px;">
<img src="resized_pic.jpg" style="position: relative;" alt="Thumbnail Preview" />
</div>
</div>
How can I possibly put the Thumbnail Preview under Create Thumbnail?
