Here you can find example of changing shroud color and opacity. In that case you can use defined methods setColor and setOpacity
or hotkeys Alt+Up/Down for changing opacity and `R`, Shift + Number for changing color.
Any comments from you will be very appreciated. Feel free to leave few lines of your thoughts or report bugs.
If you want to contact me by email please use contacts page.
For detailed information see documentation page.
Hotkeys
- R - set random marquee color
- Shift + [0-9] - set application marquee colors
- Alt + Up/Down - increase/reduce opacity (opacity += 0.05 or opacity -= 0.05)
Code used
<![CDATA[
<link rel="stylesheet" type="text/css" href="/css/marker.css" />
<script type="text/javascript" src="/js/prototype_reduced.js"></script>
<script type="text/javascript" src="/js/rectmarquee.js"></script>
<script type="text/javascript">
function onWindowLoad() {
new Marquee('sampleid', {
preview: 'preview',
color: '#333',
opacity: 0.45,
coords: {x1: 63, y1: 98, width: 223, height: 235}
});
}
Event.observe(window, 'load', onWindowLoad);
</script>
...
<img src="/images/examples/image2.jpg" alt="" id="sampleid" />
<div id="preview"></div>
]]>
or you can use following code to set default options
<![CDATA[
var marquee = new Marquee('sampleid', {preview: 'preview'});
marquee.setColor('#333');
marquee.setOpacity(0.45);
marquee.setCoords(63, 98, 223, 235);
]]>
"Users Comments"*
Leave your comment
Is your code derived from the Image Cropper UI at the defusion website, or the other way around?
http://www.defusion.org.uk/code/javascript-image-cropper-ui-using-prototype-scriptaculous/
Of course not.
Dave from defusion.org.uk and me are planning to collaborate in the future to create some amazing things. Now our projects are different and was created separately and independently.
Best regards, Sergey Koksharov.
Hi Sergey,
Thanks for a great tool! It saved me a whole lot of mucking about!
I have a couple of questions:
1. Is there a convenient way to remove the selection, to make the image appear exactly as it was before the user touched it with the selection tool? The best I could come up with was "selectAll()" but that leaves the handles up.
2. Also, I noticed that the x,y,w,h parameters are undefined when the update callback fires, that the callback seems to fire while dragging, and yet the "dragging" property is never true when the event fires. What am I doing wrong?
Thanks for your help, and for a great tool!
Gene
convenient way to remove the selection is deselect and reduce opacity.
I find a lot and found this is great tool. I try to add "overlay image" to it so user can see the logo that will have been add to image after crop. any suggestion?
Nice sample. If you give permission i can use this technique in web templates. http://invoguetemplates.invoguesoft.com/.
Thanks