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
