MouseOver/Out über 2 Objekten kombinieren? Wie?
gefunden am 10.11.2008Ich hab in einem Canvas mehrere kleinere Canvas Objekte und eine weitere UIComponent, im Beispiel der einfachheit halber wieder ein Canvas, liegen. Bei MouseOVER der Objekte soll die zu Beginn unsichtbare weitere Komponente rechts oben ? dem jeweiligen MouseOVER-Objekt erscheinen und bei MouseOUT wieder verschwinden. So weit, so gut - das funktioniert auch einwandfrei. Allerdings habe ich jetzt auf der ein/ausgeblendeten UIComponent einen Clickhandler, den ich ausf?n m?e. Hovere ich diese Komponente mit der Maus, l?ich den MouseOUT Event des dazugeh?en Objektes aus und die Komponente wird, bevor klickbar, ausgeblendet. Die Komponente soll also quasi eingeblendet werden bei MouseOVER der Objekte, ausgeblendet aber erst, wenn der Mauszeiger entweder das dazugeh?e Objekt oder die Komponente selbst verl?t, der MouseOVER-Effekt des dazugeh?en Objektes d?e also erst ausgef? werden, wenn die Maus sich bei MouseOVER nicht ? der eingeblendeten Komponente befindet. http://www.christoph-werner.net/flex...er2Objects.swf Code: <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="510" height="310" initialize="initApp()" viewSourceURL="srcview/index.html"> <mx:Script> <![CDATA[ import mx.controls.Alert; private function initApp():void { obj1.addEventListener(MouseEvent.MOUSE_OVER, handleMouse); obj2.addEventListener(MouseEvent.MOUSE_OVER, handleMouse); obj3.addEventListener(MouseEvent.MOUSE_OVER, handleMouse); obj1.addEventListener(MouseEvent.MOUSE_OUT, handleMouse); obj2.addEventListener(MouseEvent.MOUSE_OUT, handleMouse); obj3.addEventListener(MouseEvent.MOUSE_OUT, handleMouse); } private function handleMouse(event:MouseEvent):void { if (event.type == MouseEvent.MOUSE_OVER) { Canvas(event.target).setStyle("backgroundColor", "#BBBBBB"); moveMe.x = Canvas(event.target).x; moveMe.y = Canvas(event.target).y - 25; moveMe.visible = true; } else { Canvas(event.target).setStyle("backgroundColor", "#999999"); moveMe.visible = false; } } private function handleClick():void { Alert.show('YAY!', 'YAY!'); // do something } ]]> </mx:Script> <mx:Canvas x="5" y="5" width="500" height="300" backgroundColor="#FFFFFF"> <mx:Canvas id="obj1" x="10" y="30" width="100" height="60" backgroundColor="#999999"/> <mx:Canvas id="obj2" x="210" y="210" width="100" height="60" backgroundColor="#999999"/> <mx:Canvas id="obj3" x="370" y="130" width="100" height="60" backgroundColor="#999999"/> <mx:Canvas id="moveMe" click="handleClick()" width="25" height="25" backgroundColor="#FF0000" visible="false"/> </mx:Canvas> </mx:Application> Ideen? :confused: