mapping a drag/drop slider over an image

[murrayatuptowngallery]

I would like to have a slider or mouse position click capture means of
collecting a user input from a scale or ruler-like graphic.

I found some code snippets for mouse position capture on
dynamicdrive.com.

About halfway down the page

http://www.dynamicdrive.com/dynamicindex11/domdrag/

There is a code snippet under the header 'Limiting the range of the
drag"
to create a slider with a defined size.

code below

<div id="thumb" style="position: relative; left:0; top:0;"></div>

<script language="javascript">
var aThumb = document.getElementById("thumb");
Drag.init(aThumb, null, 0, 300, 0, 0);
</script>

I found that with the mouse position code one can scale it with JS
math functions to display the desired range of numbers.

How could a graphic image be positioned to coincide with a restricted
range of slider or mouse position.

Full screen width is fine (probably has to be this way) if using mouse
position and click capture.

I've seen graphics used as slider 'visuals' but they used complicated
systems like dojo I couldn't figure out.

Thanks

Murray

 

[murrayatuptowngallery]

I guess it's not clear what I'm asking.

I want to do something vaguely analogous to a color picker, but don't
want RGB-HSV type picking.

I want color bar that equates to the wavelengths of various colors of
light. The user points their mouse at the color they want, the mouse
position is captured by a mouse click, and the mouse position is
mathematically scaled to the corresponding wavelength and I move on to
other tasks with that captured input.

I figured out how to produce the numbers I need, but want a color
graphic to correspond to the constrained mouse space. (be it mouse
position capture or a slider widget method).

Thank you

Murray

 

[murrayatuptowngallery]

OK, I figured something out myself.

This was I guess a CSS question, not a Javascript one, but it's
related to how I want my Javascript results displayed. Sometimes it's
hard to figure out WHERE to ask WHICH dumb questions.

 

[ASM]

murrayatuptowngallery a écrit :

I guess it's not clear what I'm asking.

I want to do something vaguely analogous to a color picker, but don't
want RGB-HSV type picking.

I want color bar that equates to the wavelengths of various colors of
light.

Do you mean : to affect an opacity to an image ?

The user points their mouse at the color they want, the mouse
position is captured by a mouse click, and the mouse position is
mathematically scaled to the corresponding wavelength and I move on to
other tasks with that captured input.

You could see the Firefox's extension "ColorZilla" :
http://www.iosart.com/firefox/colorzilla/
donload it and :
- install it in FF to see what it does
- unzip the *.xpi to see how it's made

I figured out how to produce the numbers I need, but want a color
graphic to correspond to the constrained mouse space. (be it mouse
position capture or a slider widget method).

see also "Rainbow colors"
http://www.cssplay.co.uk/menu/imap.html

 

[ASM]

murrayatuptowngallery a écrit :

OK, I figured something out myself.

This was I guess a CSS question, not a Javascript one, but it's
related to how I want my Javascript results displayed. Sometimes it's
hard to figure out WHERE to ask WHICH dumb questions.

is it something like that :
http://stephane.moriaux.perso.orange.fr/truc/color-pic.htm
what you mean

 

[murrayatuptowngallery]

sorry if redundant - posting response was abnormal

You may need JRE to see the following applet.

http://www.olympusfluoview.com/java/rayleighdisks/index.html

The wavelength slider at the left or any variation of that would be
fine. I just want the user to get immediate feedback on choosing a
color of light and filling a form with wavelength in nanometers
corresponding to the color. I see the example I gave has continuous
numbers but a limited number of discrete colors...just noticed that.

Maybe an image map or a mouse position capture limited to a region
occupied by a graphic depicting the color spectrum would work...I'm
just not making it happen on my own.

Thanks

Murray