resize image.tt

• Back
• Raw format

<style type="text/css">
.resize {
    position: relative;
    cursor: se-resize;
}
.transparent {
    z-index: 10;
    -moz-opacity: 0.6;
    filter: Alpha(Opacity=60);
    opacity: 0.6;
    position: absolute;
}

</style>
<script type="text/javascript">
var mouse_pos  = { x:0, y:0 };
var resize_obj = null;

document.ondragstart = function() {
    return false; /* ie fix */
}

document.onmousemove = function(e) {
    if(e) event = e; /* ie fix */

    /// init
    mouse_pos.x = event.clientX;
    mouse_pos.y = event.clientY;

    /// resize the duplicate
    if(resize_obj) {
        var width  = resize_obj.width  - resize_obj.x + mouse_pos.x;
        var height = resize_obj.height - resize_obj.y + mouse_pos.y;
        resize_obj.dup.style.height = height + "px";
        resize_obj.dup.style.width  = width  + "px";
    }
}

document.onmouseup = function(e) {

    /// remove duplicate and load new sized image
    if(resize_obj) {

        /// init
        var regex      = new RegExp(resize_obj.img.alt);
        var src        = resize_obj.img.src;
        var obj_width  = resize_obj.width  - resize_obj.x + mouse_pos.x;
        var obj_height = resize_obj.height - resize_obj.y + mouse_pos.y;
        var src_width, src_height;

        /// find size of new image - not the same as width/height!
        regex.exec(src);
        src_width  = parseInt(RegExp.$2) + mouse_pos.x - resize_obj.x;
        src_height = parseInt(RegExp.$4) + mouse_pos.y - resize_obj.y;
        src        = src.replace(regex,
                         RegExp.$1 + src_width + RegExp.$3 + src_height
                     );

        /// remove duplicate
        resize_obj.dup.parentNode.removeChild(resize_obj.dup);

        /// reload new image
        resize_obj.img.src          = src;
        resize_obj.img.style.height = obj_height + "px";
        resize_obj.img.style.width  = obj_width  + "px";
    }

    /// reset resize_obj
    resize_obj = null;
}

init_resize = function() {

    /// set resize_obj
    resize_obj        = new Object();
    resize_obj.img    = this;
    resize_obj.width  = this.offsetWidth;
    resize_obj.height = this.offsetHeight;
    resize_obj.x      = mouse_pos.x;
    resize_obj.y      = mouse_pos.y;

    /// clone image
    resize_obj.dup            = this.cloneNode(false);
    resize_obj.dup.style.left = this.offsetLeft + "px";
    resize_obj.dup.style.top  = this.offsetTop  + "px";
    resize_obj.dup.className  = 'transparent';
    this.parentNode.appendChild(resize_obj.dup)

    /// the end
    return false;
}

window.onload = function() {

    /// init
    var _img         = document.getElementsByTagName('IMG');
    var resize_class = 'resize';

    /// find resizeable images
    for(i = 0; i < _img.length; i++) {
        if(_img.item(i).className.indexOf(resize_class) != -1) {
            _img.item(i).onmousedown = init_resize;
        }
    }
}
</script>

<h2>Try to resize the image</h2>
<!-- img src="http://eadmin.flodhest.net/eAdmin/graph/0011e3/a2c/683/traffic:MAX?--width=320&amp;--height=120&amp" class="resize" alt="(--width=)(\d+)(&--height=)(\d+)" -->
<img src="../gfx/bebis.jpg" class="resize" alt="(--width=)(\d+)(&--height=)(\d+)">