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
