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

Examples » Common use of DHTML Marquee Tool

Here you can see common use of DHTML Rectangular Marquee Tool. Try to select area on the picture below. Also try to use hotkeys, think you will be surprised with reaction :) 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
  • Arrows Right, Left, Top, Bottom - move marquee on 1 pixel (with shift key on 10 pixels)
  • Ctrl + Arrows - expand/shrink marquee window
  • Escape - deselect/disabling current selection
  • A - select all the picture
  • I - inverse current selection
  • E - switch edges (allow/deny resize)
  • Shift + N - creates new marquee on the current image with options of active marquee
  • S - switch marquees (select new marquee if using multiple areas)
  • Z - zooming (zoom in or zoom out if ctrl key has pressed)
  • 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: '#99f', opacity: 0.4}); } Event.observe(window, 'load', onWindowLoad); </script> ... <img src="/images/unimed-beijo2.jpg" alt="" id="sampleid" /> <div id="preview"></div>

 

 

"Users Comments"*

1. Arpit Jacob (May, 22 2007 at 02:18 AM)


Hey nice work I am sure this will get adopted in a lot of web projects. how about Flickr notes on Pictures on blog posts.

2. Sergey Koksharov (May, 22 2007 at 04:45 AM)


Oh, It's cool idea with Flickr. I'll care about it :) Thanks.

3. Adler (Jan, 08 2008 at 11:02 AM)


Sergey - Hmm.. It works well . But, I didn't find any way to make the marquee disappear after I'm finished with it. Calling "delete" on the object does not work. Help ...

4. Alex F (Apr, 06 2008 at 10:26 AM)


Adler use hide();

5. wh247 (Apr, 17 2008 at 09:59 PM)


Great tool !
Is there a way to disable it?

I've tried:
MarqueeTool.disable('sampleid');
MarqueeTool.disable(MarqueeToo.id);

These did not work...any ideas?
Thank you,

6. http://marqueetool.net/captcha.png?string=1238216124 (Mar, 28 2009 at 06:56 AM)


http://marqueetool.net/captcha.png?string=1238216124

7. Jayapal chandran (Apr, 02 2010 at 08:08 AM)


This is really what i was searching for my dynamic image crop using javascript and php. This could help me a lot. Additionally i am asking a question inappropriate. What javascript frame work would give me all the elements under the selection?

8. abhishek (Feb, 28 2011 at 09:32 AM)


this is marvelous example

9. abhishek (Feb, 28 2011 at 10:53 AM)


very interesting example

10. goktug (Apr, 21 2011 at 11:18 PM)


I think that SUPEER!

11. invoguesoft.com (Mar, 21 2012 at 09:16 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