1 Reply Latest reply on Nov 20, 2011 8:21 PM by Colin_Kenneth

    Stumped with a custom component. Can anyone help?

    Colin_Kenneth

      I'm working on a component that I would like to have 3 dream levels plus limbo.

       

      Oh wait, sorry...I'm mixed up. Though I do feel my issue is equally contrived and at times, frustrating to wrap my head around.

       

      diagram.jpg

       

      What I REALLY would like, is to make a custom component that does indeed have 3 levels, and I'm having issues with mouseover. My goal, Is to have a menu of several items, each a custom component. When a component is clicked, it "opens" into a similar menu of additional components, which in turn can be hovered over to display an image. That seems to be the easy part.

       

      I have created each second level item (blue), that upon mouseover displays an image (green). I have combined all of those into a single custom component, (red) and made individual states for the overall component that 1) displays ONLY the red button and 2) displays the blue components with the red component disabled.

       

      What I can't figure out is how to make ONLY the (red) item appear for mouseover and click when in the top state. What is happening at the moment is that as far as the browser is concerned, the entire component is the mouseover area. This makes it impossible to put multiple (red) items next to each other.

       

      I've tried making the (blue) and (green) components hidden and/or disabled, but it does not seem to effect the problem. I can't make those items not "accept mouseover" because the (blue) items are in turn supposed to be buttons used to display the end (green) image.

       

      Does anyone know what I can do to solve this problem? I hope I was able to describe the situation well enough. Like I said....it's kind of stupid and contrived.

        • 1. Re: Stumped with a custom component. Can anyone help?
          Colin_Kenneth Level 1

          WELL. After typing that whole deal out, I seem to have come across the solution myself, and it's ridiculously simple, and makes me feel the same for not figuring it out right away.

           

          Much like everything else in Catalyst, the "accepts mouse events" can be changed for the same object in different states. So what you do is uncheck the "accepts..." box for each item while in the top state, and check it once more in the lower states. Also, the "Transparency accepts mouse" needs to be unchecked.

           

          Simple.