Ещё один сквознячек для линкомаулии!

Examples » Changing of shroud Color and Opacity

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

<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 var marquee = new Marquee('sampleid', {preview: 'preview'}); marquee.setColor('#333'); marquee.setOpacity(0.45); marquee.setCoords(63, 98, 223, 235);

 

 

"Users Comments"*

1. bc173 (May, 25 2007 at 04:24 PM)


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/

2. Sergey Koksharov (May, 26 2007 at 12:20 AM)


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.

3. Gene Golovchinsky (Aug, 06 2008 at 08:58 PM)


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

4. sakda (Jun, 25 2009 at 04:16 PM)


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?

5. invoguesoft.com (Mar, 21 2012 at 09:18 AM)


Nice sample. If you give permission i can use this technique in web templates. http://invoguetemplates.invoguesoft.com/.

Thanks


 

Leave your comment

  • Security code
  • Comments:*
    up
  • Loading