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]<mailto:[email protected]> >>> Job-related postings should followhttp://tr.im/refreshaustinjobspolicy >>> We do not accept job posts from recruiters. >>> >>> [ Unsubscribe ] >>> To unsubscribe from this group, send email to >>> [email protected]<mailto:[email protected]> >>> >>> [ More Info ] >>> For more options, visit this group >>> athttp://groups.google.com/group/Refresh-Austin >>> -- >>> 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]<mailto:[email protected]> >>> Job-related postings should followhttp://tr.im/refreshaustinjobspolicy >>> We do not accept job posts from recruiters. >>> >>> [ Unsubscribe ] >>> To unsubscribe from this group, send email to >>> [email protected]<mailto:refresh-austin%[email protected]> >>> >>> [ More Info ] >>> For more options, visit this group >>> athttp://groups.google.com/group/Refresh-Austin >>> >>> -- >>> 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 followhttp://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 >>> athttp://groups.google.com/group/Refresh-Austin >>> >>> -- >>> 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 followhttp://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 >>> athttp://groups.google.com/group/Refresh-Austin >> >> -- >> 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 >> > > -- > 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 -- 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 -- 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
