JavaScript and mouse capturing based on X/Y axis

Posted on 2007-10-05
Last Modified: 2013-11-19
Hi all,

I'm working on a javascript based tool that essentially allows a user to create an object that opens up a gradient control, almost like a color picker. However, instead of picking up on a color, the object will have a minval/maxval/incremental value (such as .1, .01, .001, etc) properties.  Based on these properties, a whole number might go along the Y axis and an incremental value/decimal will go along the X axis.

The user will move the mouse to the lower right hand corner of the grid to gain high numerical value that will populate a text field, and upper left for smaller values. Moving left to right should only move the whole number, while vertical movement along the X axis changes the incremental.

Would anyone be able to suggest how to start approaching this type of object/control creation? I know I'm leaving rather vague details, I'd be more than happy to follow up with more insight.

Thanks all.
Question by:stevefNYC
    1 Comment
    LVL 16

    Accepted Solution

    First you'd need something to capture coordinates of mouse-clicks or mouse position. You can use javascript to do that.

    And to create the actual graphical portion of it, you'd need to use vector graphics. Take a look at SVG or VML. Either language works.. basically up to you what you want to use. The big diff is that one is Microsoft (VML). They are both "vector languages" that you can use to "draw" up stuff on the fly. Just beware that this will entail a bit of math and lots of testing.

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    How your wiki can always stay up-to-date

    Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
    - Increase transparency
    - Onboard new hires faster
    - Access from mobile/offline

    Shoutout to Emily Plummer ( for giving me this article! She did most of it, I just finished it up and posted it for her :)    Introduction In a previous article (http://www.experts-exchang…
    Introduction A frequently used term in Object-Oriented design is "SOLID" which is a mnemonic acronym that covers five principles of OO design.  These principles do not stand alone; there is interplay among them.  And they are not laws, merely princ…
    The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
    Use Wufoo, an online form creation tool, to make powerful forms. Learn how to choose which pages of your form are visible to your users based on their inputs. The page rules feature provides you with an opportunity to create if:then statements for y…

    761 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    8 Experts available now in Live!

    Get 1:1 Help Now