You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@flex.apache.org by mark goldin <ma...@gmail.com> on 2014/09/29 20:40:25 UTC
Clickable images
I need to have images that a user can either click on or move a mouse over
over some "hot" areas and trigger popups. Is there a way of making a image
responding to user mouse actions?
Thanks
Re: Clickable images
Posted by mark goldin <ma...@gmail.com>.
Is not a problem to catch a muse click or anything once I have placed
hotspots over the picture. Think about it as a chart with a custom
background image. In fact, I am thinking to customize a plot chart.
On Tue, Sep 30, 2014 at 2:13 PM, Subscriptions <subscriptions@leeburrows.com
> wrote:
> How about triggering a hotspot based on MouseEvent localX, localY
> properties?
>
> something like this...
>
> yourImage.addEventListener(MouseEvent.CLICK, mouseHandler);
>
> function mouseHandler(event:MouseEvent):void
> {
> for (var i:int=0;i<rects.length;i++)
> {
> if (rects[i].contains(event.localX, event.localY)
> {
> //hotspot i clicked, do something
> break;
> }
> }
> }
>
> rects will be an array of Rectangle objects that represent your hotspots
>
> Lee Burrows
> ActionScripter
>
>
> On 30/09/2014 19:03, mark goldin wrote:
>
>> The thing is I dont know up front how many hot spots I am going to have
>> and
>> where I will put them. This about this as a chart.
>>
>> On Tue, Sep 30, 2014 at 1:00 PM, jude <fl...@gmail.com> wrote:
>>
>> Is what you are looking for similar to an HTML image map? If so there's a
>>> component for it in flexlib,
>>> http://stackoverflow.com/questions/535003/image-map-in-flex.
>>>
>>> Alex, I've been surprised by how powerful Spark skinning is and I still
>>> don't think people are realizing how they can use it. It was and is a
>>> newish paradigm that many Flex devs haven't fully explored IMHO.
>>>
>>> In this case you would have a custom SkinnableContainer with your custom
>>> skin. In the skin you would have the background image and the clickable
>>> images (Spark Image instances with unique ID's?). Then in the custom
>>> SkinnableContainer you would override the addPart handler and add
>>> listeners
>>> for each clickable image. Does this make sense or am I over complicating
>>> it?
>>>
>>> On Tue, Sep 30, 2014 at 11:23 AM, Alex Harui <ah...@adobe.com> wrote:
>>>
>>>
>>>> On 9/30/14 3:30 AM, "mark goldin" <ma...@gmail.com> wrote:
>>>>
>>>> If I have a custom skin with objects that need be shown over the
>>>>> picture
>>>>> then I can position these objects differently at the run time?
>>>>>
>>>> You can add code to the skin to change the depth order of things in the
>>>> skin, or place non-mouseEnabled items over the button.
>>>>
>>>> -Alex
>>>>
>>>>
>>>>
>
Re: Clickable images
Posted by Subscriptions <su...@leeburrows.com>.
How about triggering a hotspot based on MouseEvent localX, localY
properties?
something like this...
yourImage.addEventListener(MouseEvent.CLICK, mouseHandler);
function mouseHandler(event:MouseEvent):void
{
for (var i:int=0;i<rects.length;i++)
{
if (rects[i].contains(event.localX, event.localY)
{
//hotspot i clicked, do something
break;
}
}
}
rects will be an array of Rectangle objects that represent your hotspots
Lee Burrows
ActionScripter
On 30/09/2014 19:03, mark goldin wrote:
> The thing is I dont know up front how many hot spots I am going to have and
> where I will put them. This about this as a chart.
>
> On Tue, Sep 30, 2014 at 1:00 PM, jude <fl...@gmail.com> wrote:
>
>> Is what you are looking for similar to an HTML image map? If so there's a
>> component for it in flexlib,
>> http://stackoverflow.com/questions/535003/image-map-in-flex.
>>
>> Alex, I've been surprised by how powerful Spark skinning is and I still
>> don't think people are realizing how they can use it. It was and is a
>> newish paradigm that many Flex devs haven't fully explored IMHO.
>>
>> In this case you would have a custom SkinnableContainer with your custom
>> skin. In the skin you would have the background image and the clickable
>> images (Spark Image instances with unique ID's?). Then in the custom
>> SkinnableContainer you would override the addPart handler and add listeners
>> for each clickable image. Does this make sense or am I over complicating
>> it?
>>
>> On Tue, Sep 30, 2014 at 11:23 AM, Alex Harui <ah...@adobe.com> wrote:
>>
>>>
>>> On 9/30/14 3:30 AM, "mark goldin" <ma...@gmail.com> wrote:
>>>
>>>> If I have a custom skin with objects that need be shown over the picture
>>>> then I can position these objects differently at the run time?
>>> You can add code to the skin to change the depth order of things in the
>>> skin, or place non-mouseEnabled items over the button.
>>>
>>> -Alex
>>>
>>>
Re: Clickable images
Posted by mark goldin <ma...@gmail.com>.
The thing is I dont know up front how many hot spots I am going to have and
where I will put them. This about this as a chart.
On Tue, Sep 30, 2014 at 1:00 PM, jude <fl...@gmail.com> wrote:
> Is what you are looking for similar to an HTML image map? If so there's a
> component for it in flexlib,
> http://stackoverflow.com/questions/535003/image-map-in-flex.
>
> Alex, I've been surprised by how powerful Spark skinning is and I still
> don't think people are realizing how they can use it. It was and is a
> newish paradigm that many Flex devs haven't fully explored IMHO.
>
> In this case you would have a custom SkinnableContainer with your custom
> skin. In the skin you would have the background image and the clickable
> images (Spark Image instances with unique ID's?). Then in the custom
> SkinnableContainer you would override the addPart handler and add listeners
> for each clickable image. Does this make sense or am I over complicating
> it?
>
> On Tue, Sep 30, 2014 at 11:23 AM, Alex Harui <ah...@adobe.com> wrote:
>
> >
> >
> > On 9/30/14 3:30 AM, "mark goldin" <ma...@gmail.com> wrote:
> >
> > >If I have a custom skin with objects that need be shown over the picture
> > >then I can position these objects differently at the run time?
> >
> > You can add code to the skin to change the depth order of things in the
> > skin, or place non-mouseEnabled items over the button.
> >
> > -Alex
> >
> >
>
Re: Clickable images
Posted by jude <fl...@gmail.com>.
Is what you are looking for similar to an HTML image map? If so there's a
component for it in flexlib,
http://stackoverflow.com/questions/535003/image-map-in-flex.
Alex, I've been surprised by how powerful Spark skinning is and I still
don't think people are realizing how they can use it. It was and is a
newish paradigm that many Flex devs haven't fully explored IMHO.
In this case you would have a custom SkinnableContainer with your custom
skin. In the skin you would have the background image and the clickable
images (Spark Image instances with unique ID's?). Then in the custom
SkinnableContainer you would override the addPart handler and add listeners
for each clickable image. Does this make sense or am I over complicating
it?
On Tue, Sep 30, 2014 at 11:23 AM, Alex Harui <ah...@adobe.com> wrote:
>
>
> On 9/30/14 3:30 AM, "mark goldin" <ma...@gmail.com> wrote:
>
> >If I have a custom skin with objects that need be shown over the picture
> >then I can position these objects differently at the run time?
>
> You can add code to the skin to change the depth order of things in the
> skin, or place non-mouseEnabled items over the button.
>
> -Alex
>
>
Re: Clickable images
Posted by Alex Harui <ah...@adobe.com>.
On 9/30/14 3:30 AM, "mark goldin" <ma...@gmail.com> wrote:
>If I have a custom skin with objects that need be shown over the picture
>then I can position these objects differently at the run time?
You can add code to the skin to change the depth order of things in the
skin, or place non-mouseEnabled items over the button.
-Alex
Re: Clickable images
Posted by mark goldin <ma...@gmail.com>.
Another idea might be to use a chart showing dots without lines connecting
them, hiding both axes, and having the image as a background image. Can
that be done?
Thanks
On Tue, Sep 30, 2014 at 5:30 AM, mark goldin <ma...@gmail.com> wrote:
> If I have a custom skin with objects that need be shown over the picture
> then I can position these objects differently at the run time?
>
> On Mon, Sep 29, 2014 at 10:55 PM, Alex Harui <ah...@adobe.com> wrote:
>
>> An image can certainly have transparency such that the only visible pixels
>> are in the shape of a triangle.
>>
>> Depending on which coordinates you print out, the mouseEvent should have
>> localX/localY which should be relative to the target, and stageX/stageY
>> which is relative to the stage.
>>
>> I'm curious to know why nobody suggested a custom skin with the images
>> embedded in it.
>>
>> -Alex
>>
>> On 9/29/14 1:26 PM, "Marcus Fritze" <ma...@googlemail.com> wrote:
>>
>> >0/0 is top left of the component
>> >
>> >A triangle? The image component is a rectangle (4 sides). The image is a
>> >triangle? Maybe you should look how the image (triangle) is placed in the
>> >image component (rectangle).
>> >
>> >Marcus Fritze
>> >
>> >> Am 29.09.2014 um 22:11 schrieb mark goldin <ma...@gmail.com>:
>> >>
>> >> So, if I have a triangle and I click somewhere in it and see x=700 and
>> >> y=330. Where are these coordinates coming form? Is the left lower
>> >>corner =
>> >> 0;0?
>> >>
>> >> On Mon, Sep 29, 2014 at 3:01 PM, Marcus Fritze
>> >><marcus.fritze@googlemail.com
>> >>> wrote:
>> >>
>> >>> Maybe, your "hot areas" are already shown inside the image and you
>> >>>don't
>> >>> need labels (links) above the image.
>> >>>
>> >>> You can use the click (MouseEvent.Click) event on the image and look
>> at
>> >>> the click position. And now you can store your "hot areas" in a array
>> >>>and
>> >>> now you look if your target click position in inside the "hot area
>> >>> array"....
>> >>>
>> >>> Marcus Fritze
>> >>>
>> >>>> Am 29.09.2014 um 21:44 schrieb OmPrakash Muppirala
>> >>>><bigosmallm@gmail.com
>> >>>> :
>> >>>>
>> >>>> You need to create these transparent labels/buttons and put it on top
>> >>>>of
>> >>>> the image. You will need to know the co-ordinates of where you want
>> >>>>to
>> >>>> place them.
>> >>>>> On Sep 29, 2014 12:04 PM, "mark goldin" <ma...@gmail.com>
>> >>>>>wrote:
>> >>>>>
>> >>>>> Well, but what about an image?
>> >>>>>
>> >>>>> On Mon, Sep 29, 2014 at 2:01 PM, Philip Medlam
>> >>>>><philip.medlam@gmail.com
>> >>>>
>> >>>>> wrote:
>> >>>>>
>> >>>>>> You could use, for example, a label that has a defined
>> width/height
>> >>> and
>> >>>>>> position (x/y)
>> >>>>>> * <s:Label id="hotSpot1" text="1" alpha="0.3"
>> >>>>>> click="hotSpot1_clickHandler(event)"/>*
>> >>>>>>
>> >>>>>> I tend to define the labels position in the creation complete
>> >>>>>>function,
>> >>>>>> e.g.:
>> >>>>>>
>> >>>>>> *private function creationCompleteHandler(event:FlexEvent):void*
>> >>>>>> * {*
>> >>>>>> * hotSpot1.width = 50;*
>> >>>>>> * hotSpot1.height = 50;*
>> >>>>>> * hotSpot1.x = myMap1.x + myMap1.width * 0.37 -
>> >>>>> hotSpot1.width /
>> >>>>>> 2;*
>> >>>>>> * hotSpot1.y = myMap1.y + myMap1.height * 0.49 -
>> >>>>> hotSpot1.height
>> >>>>>> / 2;*
>> >>>>>> *}*
>> >>>>>>
>> >>>>>>
>> >>>>>> You can use a zero alpha and blank text as required
>> >>>>>>
>> >>>>>> and the handler to test the click:
>> >>>>>>
>> >>>>>> * private function
>> >>>>>>hotSpot1_clickHandler(event:MouseEvent):void*
>> >>>>>> * {*
>> >>>>>> * trace("Hotspot 1 clicked");*
>> >>>>>> * }*
>> >>>>>>
>> >>>>>> Then you can modify the handler as required.
>> >>>>>>
>> >>>>>> Phil.
>> >>>>>>
>> >>>>>>
>> >>>>>> On Mon, Sep 29, 2014 at 7:40 PM, mark goldin <
>> markzolotoy@gmail.com>
>> >>>>>> wrote:
>> >>>>>>
>> >>>>>>> I need to have images that a user can either click on or move a
>> >>>>>>>mouse
>> >>>>>> over
>> >>>>>>> over some "hot" areas and trigger popups. Is there a way of making
>> >>>>>>>a
>> >>>>>> image
>> >>>>>>> responding to user mouse actions?
>> >>>>>>>
>> >>>>>>> Thanks
>> >>>>>>
>> >>>>>>
>> >>>>>>
>> >>>>>> --
>> >>>>>> Philip Medlam
>> >>>>>
>> >>>
>>
>>
>
Re: Clickable images
Posted by mark goldin <ma...@gmail.com>.
If I have a custom skin with objects that need be shown over the picture
then I can position these objects differently at the run time?
On Mon, Sep 29, 2014 at 10:55 PM, Alex Harui <ah...@adobe.com> wrote:
> An image can certainly have transparency such that the only visible pixels
> are in the shape of a triangle.
>
> Depending on which coordinates you print out, the mouseEvent should have
> localX/localY which should be relative to the target, and stageX/stageY
> which is relative to the stage.
>
> I'm curious to know why nobody suggested a custom skin with the images
> embedded in it.
>
> -Alex
>
> On 9/29/14 1:26 PM, "Marcus Fritze" <ma...@googlemail.com> wrote:
>
> >0/0 is top left of the component
> >
> >A triangle? The image component is a rectangle (4 sides). The image is a
> >triangle? Maybe you should look how the image (triangle) is placed in the
> >image component (rectangle).
> >
> >Marcus Fritze
> >
> >> Am 29.09.2014 um 22:11 schrieb mark goldin <ma...@gmail.com>:
> >>
> >> So, if I have a triangle and I click somewhere in it and see x=700 and
> >> y=330. Where are these coordinates coming form? Is the left lower
> >>corner =
> >> 0;0?
> >>
> >> On Mon, Sep 29, 2014 at 3:01 PM, Marcus Fritze
> >><marcus.fritze@googlemail.com
> >>> wrote:
> >>
> >>> Maybe, your "hot areas" are already shown inside the image and you
> >>>don't
> >>> need labels (links) above the image.
> >>>
> >>> You can use the click (MouseEvent.Click) event on the image and look at
> >>> the click position. And now you can store your "hot areas" in a array
> >>>and
> >>> now you look if your target click position in inside the "hot area
> >>> array"....
> >>>
> >>> Marcus Fritze
> >>>
> >>>> Am 29.09.2014 um 21:44 schrieb OmPrakash Muppirala
> >>>><bigosmallm@gmail.com
> >>>> :
> >>>>
> >>>> You need to create these transparent labels/buttons and put it on top
> >>>>of
> >>>> the image. You will need to know the co-ordinates of where you want
> >>>>to
> >>>> place them.
> >>>>> On Sep 29, 2014 12:04 PM, "mark goldin" <ma...@gmail.com>
> >>>>>wrote:
> >>>>>
> >>>>> Well, but what about an image?
> >>>>>
> >>>>> On Mon, Sep 29, 2014 at 2:01 PM, Philip Medlam
> >>>>><philip.medlam@gmail.com
> >>>>
> >>>>> wrote:
> >>>>>
> >>>>>> You could use, for example, a label that has a defined width/height
> >>> and
> >>>>>> position (x/y)
> >>>>>> * <s:Label id="hotSpot1" text="1" alpha="0.3"
> >>>>>> click="hotSpot1_clickHandler(event)"/>*
> >>>>>>
> >>>>>> I tend to define the labels position in the creation complete
> >>>>>>function,
> >>>>>> e.g.:
> >>>>>>
> >>>>>> *private function creationCompleteHandler(event:FlexEvent):void*
> >>>>>> * {*
> >>>>>> * hotSpot1.width = 50;*
> >>>>>> * hotSpot1.height = 50;*
> >>>>>> * hotSpot1.x = myMap1.x + myMap1.width * 0.37 -
> >>>>> hotSpot1.width /
> >>>>>> 2;*
> >>>>>> * hotSpot1.y = myMap1.y + myMap1.height * 0.49 -
> >>>>> hotSpot1.height
> >>>>>> / 2;*
> >>>>>> *}*
> >>>>>>
> >>>>>>
> >>>>>> You can use a zero alpha and blank text as required
> >>>>>>
> >>>>>> and the handler to test the click:
> >>>>>>
> >>>>>> * private function
> >>>>>>hotSpot1_clickHandler(event:MouseEvent):void*
> >>>>>> * {*
> >>>>>> * trace("Hotspot 1 clicked");*
> >>>>>> * }*
> >>>>>>
> >>>>>> Then you can modify the handler as required.
> >>>>>>
> >>>>>> Phil.
> >>>>>>
> >>>>>>
> >>>>>> On Mon, Sep 29, 2014 at 7:40 PM, mark goldin <markzolotoy@gmail.com
> >
> >>>>>> wrote:
> >>>>>>
> >>>>>>> I need to have images that a user can either click on or move a
> >>>>>>>mouse
> >>>>>> over
> >>>>>>> over some "hot" areas and trigger popups. Is there a way of making
> >>>>>>>a
> >>>>>> image
> >>>>>>> responding to user mouse actions?
> >>>>>>>
> >>>>>>> Thanks
> >>>>>>
> >>>>>>
> >>>>>>
> >>>>>> --
> >>>>>> Philip Medlam
> >>>>>
> >>>
>
>
Re: Clickable images
Posted by Alex Harui <ah...@adobe.com>.
An image can certainly have transparency such that the only visible pixels
are in the shape of a triangle.
Depending on which coordinates you print out, the mouseEvent should have
localX/localY which should be relative to the target, and stageX/stageY
which is relative to the stage.
I'm curious to know why nobody suggested a custom skin with the images
embedded in it.
-Alex
On 9/29/14 1:26 PM, "Marcus Fritze" <ma...@googlemail.com> wrote:
>0/0 is top left of the component
>
>A triangle? The image component is a rectangle (4 sides). The image is a
>triangle? Maybe you should look how the image (triangle) is placed in the
>image component (rectangle).
>
>Marcus Fritze
>
>> Am 29.09.2014 um 22:11 schrieb mark goldin <ma...@gmail.com>:
>>
>> So, if I have a triangle and I click somewhere in it and see x=700 and
>> y=330. Where are these coordinates coming form? Is the left lower
>>corner =
>> 0;0?
>>
>> On Mon, Sep 29, 2014 at 3:01 PM, Marcus Fritze
>><marcus.fritze@googlemail.com
>>> wrote:
>>
>>> Maybe, your "hot areas" are already shown inside the image and you
>>>don't
>>> need labels (links) above the image.
>>>
>>> You can use the click (MouseEvent.Click) event on the image and look at
>>> the click position. And now you can store your "hot areas" in a array
>>>and
>>> now you look if your target click position in inside the "hot area
>>> array"....
>>>
>>> Marcus Fritze
>>>
>>>> Am 29.09.2014 um 21:44 schrieb OmPrakash Muppirala
>>>><bigosmallm@gmail.com
>>>> :
>>>>
>>>> You need to create these transparent labels/buttons and put it on top
>>>>of
>>>> the image. You will need to know the co-ordinates of where you want
>>>>to
>>>> place them.
>>>>> On Sep 29, 2014 12:04 PM, "mark goldin" <ma...@gmail.com>
>>>>>wrote:
>>>>>
>>>>> Well, but what about an image?
>>>>>
>>>>> On Mon, Sep 29, 2014 at 2:01 PM, Philip Medlam
>>>>><philip.medlam@gmail.com
>>>>
>>>>> wrote:
>>>>>
>>>>>> You could use, for example, a label that has a defined width/height
>>> and
>>>>>> position (x/y)
>>>>>> * <s:Label id="hotSpot1" text="1" alpha="0.3"
>>>>>> click="hotSpot1_clickHandler(event)"/>*
>>>>>>
>>>>>> I tend to define the labels position in the creation complete
>>>>>>function,
>>>>>> e.g.:
>>>>>>
>>>>>> *private function creationCompleteHandler(event:FlexEvent):void*
>>>>>> * {*
>>>>>> * hotSpot1.width = 50;*
>>>>>> * hotSpot1.height = 50;*
>>>>>> * hotSpot1.x = myMap1.x + myMap1.width * 0.37 -
>>>>> hotSpot1.width /
>>>>>> 2;*
>>>>>> * hotSpot1.y = myMap1.y + myMap1.height * 0.49 -
>>>>> hotSpot1.height
>>>>>> / 2;*
>>>>>> *}*
>>>>>>
>>>>>>
>>>>>> You can use a zero alpha and blank text as required
>>>>>>
>>>>>> and the handler to test the click:
>>>>>>
>>>>>> * private function
>>>>>>hotSpot1_clickHandler(event:MouseEvent):void*
>>>>>> * {*
>>>>>> * trace("Hotspot 1 clicked");*
>>>>>> * }*
>>>>>>
>>>>>> Then you can modify the handler as required.
>>>>>>
>>>>>> Phil.
>>>>>>
>>>>>>
>>>>>> On Mon, Sep 29, 2014 at 7:40 PM, mark goldin <ma...@gmail.com>
>>>>>> wrote:
>>>>>>
>>>>>>> I need to have images that a user can either click on or move a
>>>>>>>mouse
>>>>>> over
>>>>>>> over some "hot" areas and trigger popups. Is there a way of making
>>>>>>>a
>>>>>> image
>>>>>>> responding to user mouse actions?
>>>>>>>
>>>>>>> Thanks
>>>>>>
>>>>>>
>>>>>>
>>>>>> --
>>>>>> Philip Medlam
>>>>>
>>>
Re: Clickable images
Posted by Marcus Fritze <ma...@googlemail.com>.
0/0 is top left of the component
A triangle? The image component is a rectangle (4 sides). The image is a triangle? Maybe you should look how the image (triangle) is placed in the image component (rectangle).
Marcus Fritze
> Am 29.09.2014 um 22:11 schrieb mark goldin <ma...@gmail.com>:
>
> So, if I have a triangle and I click somewhere in it and see x=700 and
> y=330. Where are these coordinates coming form? Is the left lower corner =
> 0;0?
>
> On Mon, Sep 29, 2014 at 3:01 PM, Marcus Fritze <marcus.fritze@googlemail.com
>> wrote:
>
>> Maybe, your "hot areas" are already shown inside the image and you don't
>> need labels (links) above the image.
>>
>> You can use the click (MouseEvent.Click) event on the image and look at
>> the click position. And now you can store your "hot areas" in a array and
>> now you look if your target click position in inside the "hot area
>> array"....
>>
>> Marcus Fritze
>>
>>> Am 29.09.2014 um 21:44 schrieb OmPrakash Muppirala <bigosmallm@gmail.com
>>> :
>>>
>>> You need to create these transparent labels/buttons and put it on top of
>>> the image. You will need to know the co-ordinates of where you want to
>>> place them.
>>>> On Sep 29, 2014 12:04 PM, "mark goldin" <ma...@gmail.com> wrote:
>>>>
>>>> Well, but what about an image?
>>>>
>>>> On Mon, Sep 29, 2014 at 2:01 PM, Philip Medlam <philip.medlam@gmail.com
>>>
>>>> wrote:
>>>>
>>>>> You could use, for example, a label that has a defined width/height
>> and
>>>>> position (x/y)
>>>>> * <s:Label id="hotSpot1" text="1" alpha="0.3"
>>>>> click="hotSpot1_clickHandler(event)"/>*
>>>>>
>>>>> I tend to define the labels position in the creation complete function,
>>>>> e.g.:
>>>>>
>>>>> *private function creationCompleteHandler(event:FlexEvent):void*
>>>>> * {*
>>>>> * hotSpot1.width = 50;*
>>>>> * hotSpot1.height = 50;*
>>>>> * hotSpot1.x = myMap1.x + myMap1.width * 0.37 -
>>>> hotSpot1.width /
>>>>> 2;*
>>>>> * hotSpot1.y = myMap1.y + myMap1.height * 0.49 -
>>>> hotSpot1.height
>>>>> / 2;*
>>>>> *}*
>>>>>
>>>>>
>>>>> You can use a zero alpha and blank text as required
>>>>>
>>>>> and the handler to test the click:
>>>>>
>>>>> * private function hotSpot1_clickHandler(event:MouseEvent):void*
>>>>> * {*
>>>>> * trace("Hotspot 1 clicked");*
>>>>> * }*
>>>>>
>>>>> Then you can modify the handler as required.
>>>>>
>>>>> Phil.
>>>>>
>>>>>
>>>>> On Mon, Sep 29, 2014 at 7:40 PM, mark goldin <ma...@gmail.com>
>>>>> wrote:
>>>>>
>>>>>> I need to have images that a user can either click on or move a mouse
>>>>> over
>>>>>> over some "hot" areas and trigger popups. Is there a way of making a
>>>>> image
>>>>>> responding to user mouse actions?
>>>>>>
>>>>>> Thanks
>>>>>
>>>>>
>>>>>
>>>>> --
>>>>> Philip Medlam
>>>>
>>
Re: Clickable images
Posted by mark goldin <ma...@gmail.com>.
So, if I have a triangle and I click somewhere in it and see x=700 and
y=330. Where are these coordinates coming form? Is the left lower corner =
0;0?
On Mon, Sep 29, 2014 at 3:01 PM, Marcus Fritze <marcus.fritze@googlemail.com
> wrote:
> Maybe, your "hot areas" are already shown inside the image and you don't
> need labels (links) above the image.
>
> You can use the click (MouseEvent.Click) event on the image and look at
> the click position. And now you can store your "hot areas" in a array and
> now you look if your target click position in inside the "hot area
> array"....
>
> Marcus Fritze
>
> > Am 29.09.2014 um 21:44 schrieb OmPrakash Muppirala <bigosmallm@gmail.com
> >:
> >
> > You need to create these transparent labels/buttons and put it on top of
> > the image. You will need to know the co-ordinates of where you want to
> > place them.
> >> On Sep 29, 2014 12:04 PM, "mark goldin" <ma...@gmail.com> wrote:
> >>
> >> Well, but what about an image?
> >>
> >> On Mon, Sep 29, 2014 at 2:01 PM, Philip Medlam <philip.medlam@gmail.com
> >
> >> wrote:
> >>
> >>> You could use, for example, a label that has a defined width/height
> and
> >>> position (x/y)
> >>> * <s:Label id="hotSpot1" text="1" alpha="0.3"
> >>> click="hotSpot1_clickHandler(event)"/>*
> >>>
> >>> I tend to define the labels position in the creation complete function,
> >>> e.g.:
> >>>
> >>> *private function creationCompleteHandler(event:FlexEvent):void*
> >>> * {*
> >>> * hotSpot1.width = 50;*
> >>> * hotSpot1.height = 50;*
> >>> * hotSpot1.x = myMap1.x + myMap1.width * 0.37 -
> >> hotSpot1.width /
> >>> 2;*
> >>> * hotSpot1.y = myMap1.y + myMap1.height * 0.49 -
> >> hotSpot1.height
> >>> / 2;*
> >>> *}*
> >>>
> >>>
> >>> You can use a zero alpha and blank text as required
> >>>
> >>> and the handler to test the click:
> >>>
> >>> * private function hotSpot1_clickHandler(event:MouseEvent):void*
> >>> * {*
> >>> * trace("Hotspot 1 clicked");*
> >>> * }*
> >>>
> >>> Then you can modify the handler as required.
> >>>
> >>> Phil.
> >>>
> >>>
> >>> On Mon, Sep 29, 2014 at 7:40 PM, mark goldin <ma...@gmail.com>
> >>> wrote:
> >>>
> >>>> I need to have images that a user can either click on or move a mouse
> >>> over
> >>>> over some "hot" areas and trigger popups. Is there a way of making a
> >>> image
> >>>> responding to user mouse actions?
> >>>>
> >>>> Thanks
> >>>
> >>>
> >>>
> >>> --
> >>> Philip Medlam
> >>
>
Re: Clickable images
Posted by Marcus Fritze <ma...@googlemail.com>.
Maybe, your "hot areas" are already shown inside the image and you don't need labels (links) above the image.
You can use the click (MouseEvent.Click) event on the image and look at the click position. And now you can store your "hot areas" in a array and now you look if your target click position in inside the "hot area array"....
Marcus Fritze
> Am 29.09.2014 um 21:44 schrieb OmPrakash Muppirala <bi...@gmail.com>:
>
> You need to create these transparent labels/buttons and put it on top of
> the image. You will need to know the co-ordinates of where you want to
> place them.
>> On Sep 29, 2014 12:04 PM, "mark goldin" <ma...@gmail.com> wrote:
>>
>> Well, but what about an image?
>>
>> On Mon, Sep 29, 2014 at 2:01 PM, Philip Medlam <ph...@gmail.com>
>> wrote:
>>
>>> You could use, for example, a label that has a defined width/height and
>>> position (x/y)
>>> * <s:Label id="hotSpot1" text="1" alpha="0.3"
>>> click="hotSpot1_clickHandler(event)"/>*
>>>
>>> I tend to define the labels position in the creation complete function,
>>> e.g.:
>>>
>>> *private function creationCompleteHandler(event:FlexEvent):void*
>>> * {*
>>> * hotSpot1.width = 50;*
>>> * hotSpot1.height = 50;*
>>> * hotSpot1.x = myMap1.x + myMap1.width * 0.37 -
>> hotSpot1.width /
>>> 2;*
>>> * hotSpot1.y = myMap1.y + myMap1.height * 0.49 -
>> hotSpot1.height
>>> / 2;*
>>> *}*
>>>
>>>
>>> You can use a zero alpha and blank text as required
>>>
>>> and the handler to test the click:
>>>
>>> * private function hotSpot1_clickHandler(event:MouseEvent):void*
>>> * {*
>>> * trace("Hotspot 1 clicked");*
>>> * }*
>>>
>>> Then you can modify the handler as required.
>>>
>>> Phil.
>>>
>>>
>>> On Mon, Sep 29, 2014 at 7:40 PM, mark goldin <ma...@gmail.com>
>>> wrote:
>>>
>>>> I need to have images that a user can either click on or move a mouse
>>> over
>>>> over some "hot" areas and trigger popups. Is there a way of making a
>>> image
>>>> responding to user mouse actions?
>>>>
>>>> Thanks
>>>
>>>
>>>
>>> --
>>> Philip Medlam
>>
Re: Clickable images
Posted by OmPrakash Muppirala <bi...@gmail.com>.
You need to create these transparent labels/buttons and put it on top of
the image. You will need to know the co-ordinates of where you want to
place them.
On Sep 29, 2014 12:04 PM, "mark goldin" <ma...@gmail.com> wrote:
> Well, but what about an image?
>
> On Mon, Sep 29, 2014 at 2:01 PM, Philip Medlam <ph...@gmail.com>
> wrote:
>
> > You could use, for example, a label that has a defined width/height and
> > position (x/y)
> > * <s:Label id="hotSpot1" text="1" alpha="0.3"
> > click="hotSpot1_clickHandler(event)"/>*
> >
> > I tend to define the labels position in the creation complete function,
> > e.g.:
> >
> > *private function creationCompleteHandler(event:FlexEvent):void*
> > * {*
> > * hotSpot1.width = 50;*
> > * hotSpot1.height = 50;*
> > * hotSpot1.x = myMap1.x + myMap1.width * 0.37 -
> hotSpot1.width /
> > 2;*
> > * hotSpot1.y = myMap1.y + myMap1.height * 0.49 -
> hotSpot1.height
> > / 2;*
> > *}*
> >
> >
> > You can use a zero alpha and blank text as required
> >
> > and the handler to test the click:
> >
> > * private function hotSpot1_clickHandler(event:MouseEvent):void*
> > * {*
> > * trace("Hotspot 1 clicked");*
> > * }*
> >
> > Then you can modify the handler as required.
> >
> > Phil.
> >
> >
> > On Mon, Sep 29, 2014 at 7:40 PM, mark goldin <ma...@gmail.com>
> > wrote:
> >
> > > I need to have images that a user can either click on or move a mouse
> > over
> > > over some "hot" areas and trigger popups. Is there a way of making a
> > image
> > > responding to user mouse actions?
> > >
> > > Thanks
> > >
> >
> >
> >
> > --
> > Philip Medlam
> >
>
Re: Clickable images
Posted by mark goldin <ma...@gmail.com>.
Well, but what about an image?
On Mon, Sep 29, 2014 at 2:01 PM, Philip Medlam <ph...@gmail.com>
wrote:
> You could use, for example, a label that has a defined width/height and
> position (x/y)
> * <s:Label id="hotSpot1" text="1" alpha="0.3"
> click="hotSpot1_clickHandler(event)"/>*
>
> I tend to define the labels position in the creation complete function,
> e.g.:
>
> *private function creationCompleteHandler(event:FlexEvent):void*
> * {*
> * hotSpot1.width = 50;*
> * hotSpot1.height = 50;*
> * hotSpot1.x = myMap1.x + myMap1.width * 0.37 - hotSpot1.width /
> 2;*
> * hotSpot1.y = myMap1.y + myMap1.height * 0.49 - hotSpot1.height
> / 2;*
> *}*
>
>
> You can use a zero alpha and blank text as required
>
> and the handler to test the click:
>
> * private function hotSpot1_clickHandler(event:MouseEvent):void*
> * {*
> * trace("Hotspot 1 clicked");*
> * }*
>
> Then you can modify the handler as required.
>
> Phil.
>
>
> On Mon, Sep 29, 2014 at 7:40 PM, mark goldin <ma...@gmail.com>
> wrote:
>
> > I need to have images that a user can either click on or move a mouse
> over
> > over some "hot" areas and trigger popups. Is there a way of making a
> image
> > responding to user mouse actions?
> >
> > Thanks
> >
>
>
>
> --
> Philip Medlam
>
Re: Clickable images
Posted by Philip Medlam <ph...@gmail.com>.
You could use, for example, a label that has a defined width/height and
position (x/y)
* <s:Label id="hotSpot1" text="1" alpha="0.3"
click="hotSpot1_clickHandler(event)"/>*
I tend to define the labels position in the creation complete function,
e.g.:
*private function creationCompleteHandler(event:FlexEvent):void*
* {*
* hotSpot1.width = 50;*
* hotSpot1.height = 50;*
* hotSpot1.x = myMap1.x + myMap1.width * 0.37 - hotSpot1.width /
2;*
* hotSpot1.y = myMap1.y + myMap1.height * 0.49 - hotSpot1.height
/ 2;*
*}*
You can use a zero alpha and blank text as required
and the handler to test the click:
* private function hotSpot1_clickHandler(event:MouseEvent):void*
* {*
* trace("Hotspot 1 clicked");*
* }*
Then you can modify the handler as required.
Phil.
On Mon, Sep 29, 2014 at 7:40 PM, mark goldin <ma...@gmail.com> wrote:
> I need to have images that a user can either click on or move a mouse over
> over some "hot" areas and trigger popups. Is there a way of making a image
> responding to user mouse actions?
>
> Thanks
>
--
Philip Medlam