473,404 Members | 2,187 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,404 software developers and data experts.

mapping a drag/drop slider over an image

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

May 9 '07 #1
5 2918
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

May 10 '07 #2
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.

May 10 '07 #3
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
--
Stephane Moriaux et son (moins) vieux Mac déjà dépassé
Stephane Moriaux and his (less) old Mac already out of date
May 10 '07 #4
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.../color-pic.htm
what you mean

--
Stephane Moriaux et son (moins) vieux Mac déjà dépassé
Stephane Moriaux and his (less) old Mac already out of date
May 10 '07 #5
sorry if redundant - posting response was abnormal

You may need JRE to see the following applet.

http://www.olympusfluoview.com/java/...sks/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
May 14 '07 #6

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

1
by: portraitmaker | last post by:
I found some drag and drop code on the web and modified it a little b taking out some of the stuff I didn't need. This sample allows you to drag an image in a table to another positio and swaps...
6
by: Colin Young | last post by:
I've got a owner-drawn listview control that displays images and now I'm trying to implement drag and drop so I can drag images from the control and drop them onto other applications. So far if I...
3
by: Goldwind | last post by:
Hi, I"m trying to use drag & drop of text from one text box to another but without suceess. Microsoft presented an example in "101 code samples" BUT in this example the code select and drag all...
2
by: sebastian.janoschka | last post by:
Hi, I build my first Drag & Drop with JavaScript and I would like to drag the pictures when I click on it. When I create a normal div tag with some text the script works, but when I put a...
5
by: murrayatuptowngallery | last post by:
I saw a 2-D (like a joystick) slider widget awhile ago. I thought it was on the dojotoolkit.org Demo page, but no one there acknowledges it (they don't deny it either). I would like to learn how...
6
by: Alfonso2968 | last post by:
Hello, If someone can help plz. I have searched everything and all I can find is how to drag and drop within a form from panel to panel. What I need to do is Drag an image from the desktop...
0
by: Truevision .Net | last post by:
Hi, I have a problem with drag and drop functionality when it comes to dropping pictures from sources like for example internet explorer and the webbrowser control. Dragging and dropping from...
0
by: jgraham | last post by:
I am trying to figure out how to receive images that are dropped from a web browser (IE or Firefox). For instance, after performing an image search on Google, I have several thumbnails displayed...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
0
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
0
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.