Although this thread is a couple months old, I wanted to let anyone interested see what finally developed with our drag-and-drop charm bracelet builder.
http://www.jamesavery.com/create-your-own/ The point of my initial question was the challenge we had with wanting to grab and drag images that are overlapping. We had to compromise and reduce the number of total charms on the bracelet, effectively getting rid of the overlap. Ideally, we'll figure out a way to get more charms on the bracelet, but for now you can only go every other link. We stuck with a JavaScript based solution for the interaction. We used jQuery UI as our base, but customized quite a bit to get the UI experience that the customer wanted. In the end we have very flexible charm bracelet builder. You can drag and drop charms on to the bracelet, swap out charms, etc. There are a lot of back-end options for administering the whole thing. Over the next few weeks we'll be adding in other base jewelry items to the system (key chains, earrings, etc.) as well. Chris onramp access -----Original Message----- From: [email protected] [mailto:[email protected]] On Behalf Of Bert Grantges Sent: Tuesday, May 04, 2010 1:13 PM To: [email protected] Subject: Re: [Refresh Austin: 5217] Re: JavaScript triggering from images Flash / Silverlight is definitely the medium for what you are trying to do, although Canvas and HTML could get you 90% there i think. Best of luck - and if you figure it out let us know :) Bert On May 4, 2010, at 12:52 PM, Chris Cage wrote: > Mmm, don't think we can go with the canvases and HTML 5. Intriguing though. > > Looks like our client has decided they can live with half as many items to > drag around. This will limit the overlap challenge. They aren't thrilled by > the idea, but they are willing to compromise for initial launch. Then maybe > the whole thing gets built in Flash. We'll see what happens. > > Chris > > -----Original Message----- > From: [email protected] > [mailto:[email protected]] On Behalf Of Bert Grantges > Sent: Monday, May 03, 2010 4:14 PM > To: [email protected] > Subject: Re: [Refresh Austin: 5211] Re: JavaScript triggering from > images > > Another thought is that depending on your level of support you dip into HTML > 5 and canvases. Depending on what you want to do that may help as well. > > > On May 3, 2010, at 3:47 PM, Ben Brown wrote: > >> OR, you could create smaller target objects within the image... >> >> For example... >> >> <div style="width:200px; height:200px; background:url(/myimage.png); >> position:relative;"> >> <a href="#" style="display:block; width:50px; height:50px; >> position:relative; top:25px; left:25px;"> </a> </div> >> >> This would create a 200x200 box with the image as the background, but >> only a 50x50 clickable area centered inside the box. >> >> hope this helps! >> >> b >> On Mon, May 3, 2010 at 3:39 PM, Garann <[email protected]> wrote: >>> Could you create new transparent objects to be moused over/dragged? >>> If you knew the dimensions of the space available to an image on the >>> bracelet, it seems like you could create "slots" they'd snap into, >>> and then have absolutely positioned links (or something else) over >>> those that the user could interact with. >>> >>> Garann >>> >>> On May 3, 2:21 pm, Chris Cage <[email protected]> wrote: >>>> Thanks for the input so far. >>>> >>>> Doug: >>>> Handles would be great, but unfortunately the nature of the imagery is >>>> such that it really isn't an option. >>>> >>>> Bert: >>>> z-index swapping is actually what we are doing and it works just isn't as >>>> useable as we'd like. Here's a little more detail. >>>> >>>> We are taking images and rotating them with Image Magick. The source >>>> images have extra white space (transparent) around them. They all have to >>>> be the same dimensions regardless of what the actual image is for >>>> alignment purposes. Once we rotate them dynamically, the resulting image >>>> is much larger than we would like it to be (dimensions - not file size). >>>> >>>> These images are then layered around a circle (charms on a charm bracelet) >>>> but overlap quite a bit. In some cases, you can only get to a particular >>>> image by hovering in a space that doesn't seem to be part of the image >>>> (but is because of the transparent canvas). >>>> >>>> We are highlighting the div holding the images on mouseOver so there is an >>>> indication of which can be selected, it's just still not as user-friendly >>>> as we'd like. >>>> >>>> Thanks, >>>> Chris >>>> >>>> From: [email protected] >>>> [mailto:[email protected]] On Behalf Of Doug Boude >>>> Sent: Monday, May 03, 2010 9:48 AM >>>> To: [email protected] >>>> Subject: Re: [Refresh Austin: 5203] JavaScript triggering from >>>> images >>>> >>>> How 'bout implementing handles on the images so that draggability is >>>> confined to a very specific area?On Mon, May 3, 2010 at 9:00 AM, Bert >>>> Grantges <[email protected]<mailto:[email protected]>> wrote: >>>> >>>> If your not worried about effecting the appearance of the page, you could >>>> do z-index swapping based on the OnMouseOver event of the div which would >>>> make image selection easier. >>>> >>>> Bert >>>> >>>> ---------------------- >>>> Coming to you from my iPhone. Strange words to be expected. >>>> >>>> On May 3, 2010, at 5:39 AM, Chris Cage >>>> <[email protected]<mailto:[email protected]>> wrote: >>>> Hi folks, >>>> >>>> I have a question that I figured I'd shoot out to y'all just to see if >>>> anyone has an idea. >>>> >>>> Using JavaScript and jQuery we are working on an interface that relies on >>>> a lot of draggable actions. Our challenge is that we have images in divs >>>> that are overlapping and becoming difficult to cleanly select. The images >>>> are PNGs with transparent backgrounds, so they don't 'look' like they >>>> overlap to the user. >>>> >>>> Has anyone been able to select an item by either triggering off an images >>>> opaque pixels or by triggering off an image map? Any other ideas? >>>> >>>> Thanks, >>>> Chris -- Our Web site: http://www.RefreshAustin.org/ You received this message because you are subscribed to the Google Groups "Refresh Austin" group. [ Posting ] To post to this group, send email to [email protected] Job-related postings should follow http://tr.im/refreshaustinjobspolicy We do not accept job posts from recruiters. [ Unsubscribe ] To unsubscribe from this group, send email to [email protected] [ More Info ] For more options, visit this group at http://groups.google.com/group/Refresh-Austin
