Rectangular Marquee Tool

Hi, Excellent piece of coding!

When are you planning the release of the new version? I'm particularly interested in the ability to manage several marquees on the same picture. This would be very handy for my next project (extracting individual articles from a newspaper).

Kind regards,

Geert

Sergey,
This looks very good indeed. I can't see how I can save the highlighted thumbnail image to the server? Is there an ASP example code you can point me to so I can do this please?
Thanks
Marcus

Hello Sergey,

i would like to use your script in our KNX@Home application, do you have (beside the MIT-License) any requests i have to fulfill to use your software?

By the way: its a great script, and we will use it to draw clickable areas!

Regards
Johannes

hi, nice piece of code - somehow the select(id) doesn't work as espected , e.g.

function myselect(id){
RectMarquee.select(id);
}

never jumps into the
if (this.activeId !== id && this.items.length > 1) {...select the thing...}
block - haven't debugged but you know how to fix this?

greets and keep up the good work!

Aart Jan, sorry for yersterday broken download link and thanks for reminding. I've fixed this problem.

Thanks for your notice, Michel!

Unfortunately its impossible now to handle clicks on images. But I'll add method for setting handler. I'll email you about updates.

Regards, Sergey

Hi, Geert Van Huychem!

It seems what Simon and you are trying to use the same id as for image.
When you've created marquee object you can get id with following code

var rmt = new MarqueeTool('myimageid');
var firstid = rmt.getId();
// add other marquee
rmt.add('secondimageid');
var secondid = rmt.getId();

Then you can use select marquee by code

rmt.select(firstid);
// some actions here ...
rmt.select(secondid);


May be this is small inconvenience to use other ids for image and objectid, I'll try to fix it in next release.

Also see first example on
http://www.marqueetool.net/examples/common-use-of-dhtml-marquee-tool/
and try to create several marquees by hotkeys ('Shift + N');
then try to select marquee also with hotkey ('S');
All working well.
I've not completed to write documentation, may be here is problem. I'll do my best to have documentation completed by the end of month. Also come back to this site in around 1-2 weeks, I'll prepare good example with several marquees.

Thanks too all of you for your interest and help.

Regards, Sergey.
P.S. If you have any questions or want to show me your adaptation (or problem with adaptation) of MarqueeTool, please ask.

setOnUpdateCallback(callback) doesn't seem to function as documented.

First, it says "Set callback function for event when dragging is finished", but clearly it is called repeatedly _while_ an edge is dragged, not when finished. It would be nice to have a callback that is actually invoked only when the drag finishes - or at least a way to know the drag is finished when you're in this callback.

Secondly, it doesn't seem to be passing x,y,w,h (at least in Firefox), and your example page doesn't use those arguments, either.

Uh... I would also like to have a min width, max width, min height and max height of the marquee.

I should work so that the marquee can not be resized to smaller than min and greater than max.

That would be a really nice feature.

Thanks again.

Amazing tool!
I'll use it for my new project

Thanks!

Hi guys!
I'm not able to run the crop tool.
The coordinates doesn't appear on the x,y,w,h points.
The message "PreviewToolTip is not defined" appears.
The message "Marqueetool is not defined" appears.
So, the crop doesn't work.
Could you help me?

var MarqueeTool;
function onMarqueeUpdate(){
alert("teste");
var coords = MarqueeTool.getCoords();
$('sample_x').innerHTML = $('coord_x').value = coords.x1;
$('sample_y').innerHTML = $('coord_y').value = coords.y1;
$('sample_w').innerHTML = $('coord_w').value = coords.width;
$('sample_h').innerHTML = $('coord_h').value = coords.height;
}
function onWindowLoad(){
new PreviewToolTip('element_container', {
id: 'preview'});
MarqueeTool = new Marquee('sampleid',{
preview: 'preview',
color: '#333',
opacity: 0.75 });

MarqueeTool.setOnUpdateCallback(onMarqueeUpdate);
}
Event.observe(window, 'load', onWindowLoad);
var RectMarquee;
function initLoad(){
RectMarquee = new Marquee('sampleid', {color: '#F60', opacity: 0.45});
}
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];

x: 0px
y: 0px
w: 0px
h: 0px

Hi Ilya and Carlos!

I don’t thought my script to use my preview tool object for other people but now I think it need to open this code too.
You need just follow these steps:

1) Make sure what you've included javascripts in your html
prototype.js, scriptaculous.js, effects.js, previewtt.js

2) Include these lines in your css file
.previewPimp {
position: absolute;
font-size: 1px;
line-height: 1px;
height: 16px;
width: 16px;
overflow: hidden;
right: 5px;
bottom: 6px;
border: 3px solid #fff;
background: url(/images/preview_pimp.gif) no-repeat top #fff;
z-index: 1001;
cursor: pointer;
}

.previewWindow {
font-size: 1px;
line-height: 1px;
position: absolute;
right: 5px;
bottom: 6px;
z-index: 1000;
border: 3px solid #fff;
background: url(/images/preview.gif) no-repeat center #333;
}

Copy images http://marqueetool.net/images/preview_pimp.gif and
http://marqueetool.net/images/preview.gif to your folder

3) In html where you have image to crop use following html
<div style="position: relative;width:510px;margin:0 auto;" id="element_container"><img src="/images/examples/image2.jpg" alt="" id="sampleid" /></div>

Where position: relative is important.

4) Use my code for generating preview tool
new PreviewToolTip('element_container', {id: 'preview'});
and then

5) Use code to create marquee
new Marquee('sampleid', {
preview: 'preview',
color: '#333',
opacity: 0.45,
coords: {x1: 63, y1: 98, width: 223, height: 235}
});

6) Link to our site if you can! ;)
<a href="http://marqueetool.net">Marquee Tool - Javascript Image Cropper</a>


Best regards,
Sergey K.
http://marqueetool.net

I'm preparing a new version on JQuery. If anybody interested - welcome back in a few weeks!

Regards,
Sergey

Talented Guy,Once i used for a template Slicing.

Thanks

This is very nice work. I am looking forward to the jQuery version.

One important option not covered in the documentation is the ratio, for setting specific proportions. I'm glad I discovered it, because without it I would have had to write my own code.

I LOVE this tool! Thank you!

I Like this tool...

Приветствую.
Последнее обновление было в 2007 году аж.
Будут ли новые обновления, хотя бы переход на новую версию prototype ?

(google translate)
Greetings.
The last update was in 2007 already.
Will the new update, even if the transition to the new version prototype?

Greetings,

I find a lot of tools and found this tool is greatest. I will try to add "overlay image" to it so the user can see the logo that will have been compose to the image after crop. any suggestion?

JQuery is good tool very powerful. I see it when I try to testing Jcrop.
This will be great if it is marqueetool with JQuery.

thank you.

Dear Sir/Madam;
My name is Violet ren, I am very glad to know your company from web and writing to you to explore the possible cooperation with you .I'm marketing for Starda Mould (HK) Co.,Ltd.Our company located in international mould manufacturing base,ShenZhen China.if you want know more for our company,please visit our WEBSITE: WWW.STARDA-MOULD.COM.

Starda Mould is a high technology engineering company specializing in the design and manufacture of molds for the plastics, rubber and die casting industries.Starda Mould know-how combined with extremely favourable costs of production provide competitive advantages internationally. Our staffs are very good at communicating in English. They will manage your projects wholly for every process.

If you have some projects in hand, please do not hesitate to send us for quoting.We will reply you in 24 hours and will quote to you very competitive price within two working days or earlier also, we will provide to you high quality products and best service.If you have any questions or comments,please contact us Email;Violet@starda-mould.com.Or stardamould@163.com.

Awaiting your kindly reply

Best Regards.
Violet Ren
Tel:86-755-28842885 Fax:86-755-28842870
Add: No 43.PingLong East Road.Pinghu.Town.ShenZhen City China

Hi,

I am using your marquee tool and I am very thankful to you, for the nice work.
I want your little help regarding the hotspots, i need more then 2 hotspots of an image at one time, and these hotspots should not overlap on each other.

i can get more then one hotspots, but these hotspot overlap each other, i need the code that the new hotspot will not overlap the previous one.

can you please help me in getting more the 2 hotspots of an image without overlapping them.
I will be very thankful to you

best regards
Tahir

You have a brilliant mind, take good care of it.

Search Engine Optimization

We would like to get your website on first page of Google.

All of our processes use the most ethical ""white hat"" Search Engine Optimization techniques that will not get your website banned or penalized.
Please reply and I would be happy to send you a proposal.

Great code! Please go on like this.

We are interested to increase traffic to your website, please get back to us in order to discuss the possibility in further detail.

Thank you for article, i was looking for this article for a few days.