Rectangular Marquee Tool

initialize(element, options)

Initialization function. Object Constructor Parameter string|object element Element with image. ID of <IMG> tag or <DIV> element with background image object options Options for Marqueetool object Default values: { ratio: 0, preview: false, previewWidth: 120, previewHeight: 120, onUpdate: null, onBeforeUpdate: null, color: 'black', opacity: 0.75, type: 'crop', // window or crop, marquee or rect, other allowResize: true, allowHotKeys: true, hideEdges: false, coords: {x1: 0, y1: 0, x2: 0, y2: 0, width: 0, height: 0} } Example Creating marquee object with opacity color #FF0000, 'window' marquee type and with no tooltip var Marqueetool = new Marquee('myphoto', {color: '#ff0000', type: 'window', showTooltip: false});

live example | comments | up

---

setColor(color)

Set color for marquee or shroud depending on marquee type option Parameter string color Color in format '#xxxxxx' where x is hex value Example Set green color for shroud Marqueetool.setShroudColor('#009900');

live example | comments | up

---

setCoords(x, y, w, h)

Set coordinates for rectangular marquee Parameter integer x x-coordinate integer y y-coordinate integer w marquee width integer h marquee height Example Set coordinates as on the picture below Marqueetool.setCoords(375, 123, 109, 246);

live example | comments | up

---

getCoords()

Get coordinates of rectangular marquee Return object Coordinates object Example var coords = Marqueetool.getCoords();
// coords.leftTop - left top corner
// coords.rightBottom - right bottom corner

new Ajax.Request(server_url, {parameters: 'x=' + coords.x1 + '&y=' + coords.y1 + '&width=' + coords.width + '&height=' + coodrs.height, onComplete: onSendCoordsComplete});

// coords.dims - dimensions
var square = coords.dims[0] * coords.dims[1];

live example | comments | up

---

inverse()

Inverse marqueetool type between window and rectangle Example <input type="button" name="invertion" value="Select all" onclick="Marqueetool.inverse()" />

live example | comments | up

---

selectAll()

Select all image space Example <a href="javascript:Marqueetool.selectAll()">Select all</a>

live example | comments | up

---

unselectAll()

Escape selection Example <a href="javascript:Marqueetool.unselectAll()">Select none</a>

live example | comments | up

---

setOpacity(opacity)

Sets opacity amount. Value can be from 0 to 1 Parameter float amount opacity amount Example Marqueetool.setOpacity(1);




live example | comments | up

---

moveLeft(amount, reduce)

Move marquee leftward on amount pixels or move only right side of the marquee if reduce parameter is true Parameter integer amount number of pixels bool reduce if specified then marquee will be reduced (not moved) Example // move marquee on 13px leftward
Marqueetool.moveLeft(13);

// reduce marquee width on 13px
Marqueetool.moveLeft(13, true);

live example | comments | up

---

moveTop(amount, reduce)

Move marquee upward on amount pixels or move only bottom side of the marquee if reduce parameter is true Parameter integer amount number of pixels bool reduce if specified then marquee will be reduced (not moved) Example // move marquee on 13px upward
Marqueetool.moveTop(13);

// reduce marquee height on 13px
Marqueetool.moveTop(13, true);

live example | comments | up

---

moveRight(amount, extend)

Move marquee rightward on amount pixels or move only right side of the marquee if extend parameter is true Parameter integer amount number of pixels bool extend if specified then marquee will be extended (not moved) Example // move marquee on 13px rightward
Marqueetool.moveRight(13);

// extend marquee width on 13px
Marqueetool.moveRight(13, true);

live example | comments | up

---

moveBottom(amount, extend)

Move marquee downward on amount pixels or move only right side of the marquee if extend parameter is true Parameter integer amount number of pixels bool extend if specified then marquee will be extended (not moved) Example // move marquee on 13px downward
Marqueetool.moveBottom(13);

// extend marquee height on 13px
Marqueetool.moveBottom(13, true);

live example | comments | up

---

setOnUpdateCallback(callback)

Set callback function for event when dragging is finished Parameter function callback function to be executed after dragging Example function finishDrag(x, y, w, h) {
   new Ajax.Request(serverURL, {
        parameters: 'position=' + arguments.join(','),
        onComplete: showThumbnail
   });
}

Marqueetool.setOnUpdateCallback(finishDrag);


live example | comments | up

---

setOnBeforeUpdateCallback(callback)

Set callback function what will executed before dragging. Callback result affect on drag process Parameter function callback function to be executed before dragging Example // that function allow only moving
function beforeDrag(elementType, x, y, w, h) {
    // elementType may have 3 values
    // Marqueetool.EDGE - Edge dragging started (16)
    // Marqueetool.MARQUEE - Marquee moving started (2)
    // Other value - Creating new marquee started (1, 4 or 8)
    if (elementType == Marqueetool.MARQUEE)
        return true;
    return false;
}

Marqueetool.setOnBeforeUpdateCallback(beforeDrag);


live example | comments | up

---

zoom(amount, out)

Zoom in/out marqueetool selection Parameter integer amount number of pixels for zooming boolean out parameter for zoom out. If defined then amount pixels will be subtracted from marquee width and height, otherwise amount of pixels added to marquee width and height Example <a href="javascript:Marqueetool.zoom(2)">Zoom in</a>
<a href="javascript:Marqueetool.zoom(2, true)">Zoom out</a>

live example | comments | up

---

accessResize(access)

Set access for resizing marquee Parameter boolean access true if allowed, false if denied (true by default)

live example | comments | up

---

accessHotKeys(access)

Set access for using keyboard hot keys Parameter boolean access true if allowed, false if denied (true by default)

live example | comments | up