How to show different images for a single button?

Posted on 2011-05-06
Last Modified: 2012-06-21
How to show different images for a single button?

I mean to say
1) It should show different image when the mouse pointer is over the button and out side of the button.

Also i have few more questions...
2) Remove the bar from the right hand pane and keep the button as it is. It should look similar to left hand pane.
3) For line functionality once a line is pressed, then i should be able to draw as many lines as possible.
4) Also check the collapse button directions. when i select open right hand pane button the button at the right hand pane is changing the direction and again i have to press the button then only at that time it is changing the direction and closing the pane.

5)Also when we right click image  properties and press right hand pane button it is not closing the pane for the first time for this we have to click twice to close the pane.

Plz provide me some sample code.

Plz find the below code.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="" layout="absolute" applicationComplete="init()" xmlns:local="*" >
                        collapseBoxDividerSkin: Embed(source="assets.swf",symbol="CollapseBoxDividerSkin");
                        expandBoxDividerSkin: Embed(source="assets.swf",symbol="ExpendBoxDividerSkin");
                        import DrawingClasses.Designer;
                        import mx.controls.Alert;
                        import mx.core.DragSource;
                        import mx.core.UIComponent;
                        import mx.managers.DragManager;
                        public var linePicture:Class; 
                        public var boxPicture:Class;
                        public var xm:XML = 
                        public var compType:XML = 
                        private var cm:ContextMenu;             
                        public var xm1:XML;
                        public var loopparent:Array = new Array();
                        private var mouseTarget:DisplayObject;
                        private var xOff:Number;
                        private var yOff:Number;        
                        private var designer:Designer = new Designer();   
                        private var i:int;
                        private var j:int;
                        private function init():void
                                var cmi1:ContextMenuItem = new ContextMenuItem("Properties", true);
                                cmi1.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, contextMenuItem_propertiesSelect);
                                var cmi2:ContextMenuItem = new ContextMenuItem("View XML", true);
                                cmi2.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, contextMenuItem_viewXMLSelect);
                                var cmi3:ContextMenuItem = new ContextMenuItem("Saved Components", true);
                                cmi3.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, contextMenuItem_savedListSelect);                      
                                cm = new ContextMenu();
                                cm.customItems = [cmi1, cmi2, cmi3];
                                cm.addEventListener(ContextMenuEvent.MENU_SELECT, contextMenu_menuSelect);
                        private function contextMenu_menuSelect(evt:ContextMenuEvent):void {
                        private function contextMenuItem_propertiesSelect(evt:ContextMenuEvent):void {
                                panelRight.width = 260;         
                                //vDivProp.moveDivider(0, 400);
                                //accrWinProp.label = "Two Way Split - Properties";                             
                                //accrWinProp.selectedIndex = 1;
                        private function contextMenuItem_viewXMLSelect(evt:ContextMenuEvent):void {                
                                viewstack1.selectedIndex = 1;
                        private function contextMenuItem_savedListSelect(evt:ContextMenuEvent):void {                
                                accrWinComp.selectedIndex = 1;
                        private var propValue:String = "Component";
                        private function itemClickEvent(event:ListEvent):void {
                                var propKey:String = dgProp.selectedItem.@key;
                                if (propKey == "name") {
                                        propValue = dgProp.selectedItem.propvalue;                              
                        private var sourceXML:XML = 
                                        <!--This is a comment. -->
                                        <?PROC_INSTR sample ?>
                                        <item id='1'>
                                        <item id='2'>
                                private var savedComp:Array=['ComponentTemplate', 
                                private var propData:XML = 
                                                <prop key="name">
                                                <prop key="Version">
                                                <prop key="Owner">
                                                <prop key="width">
                                                <prop key="height">
                                                <prop key="X-Pos">
                                                <prop key="Y-Pos">
                                                private function rightClick(event:MouseEvent):void
                                      "Properties ..." + event.currentTarget, "Open");
                        // Draging Code Starts Here
                        private var curDate:Date = new Date();
                        private var dateList:XMLList = null;
                        public function pictureDragDrop(event:DragEvent):void {  
                        // (" com = " + event.dragSource.dataForFormat("key"));
                        var nodeName:String = event.dragSource.dataForFormat("key").toString(); //txtInput1.text;
                        var nodeValue:String = "";
                        if (nodeValue == "")
                        if (xm == <AbstractComponentTemplate></AbstractComponentTemplate>)      
                                dateList = new XMLList("<DateCreated>" + curDate + "</DateCreated>");
                                dateList = new XMLList("<DateModified>" + curDate + "</DateModified>");
                                xm1 = XML("<" + nodeName + "></" + nodeName + ">");
                                xm1 = XML("<" + nodeName + "></" + nodeName + ">");
                                loopparent[i] = xm1;                                            
                                        var xmlList:XMLList = new XMLList("<" + nodeName + ">" + nodeValue + "</" + nodeName + ">");
                                if (xm1 == null)
                                        for (j = i; j>0; j--)
                                                var x:int = event.currentTarget.mouseX - xOff;
                                                var y:int = event.currentTarget.mouseY - yOff;  
                                                if(event.dragSource.dataForFormat("key") == "box")
                                                designer.addBox(x, y);   
                                                else  if(event.dragSource.dataForFormat("key") == "circle")
                                                designer.addCircle(x, y);
                                                        designer.addRectangle(x, y);
                                                // this method gets x and y coordinate of template box image
                                                private function myoffset(img:Image):void {
                                                xOff = img.mouseX;
                                                yOff = img.mouseY;
                                                // this method does acceptable draging box image
                                                public function pictureDragEnter(event:DragEvent):void{
                                                // this method supply drag box when mouse move on the design area 
                                                private function dragPicture1(event:MouseEvent, img1:Image,format:String):void{
                                                var dragInitiator:Image=Image(event.currentTarget);
                                                var ds:DragSource = new DragSource();
                                                var imageProxy:Image = new Image();
                                                imageProxy.source = img1.source;            
                                                imageProxy.height= 150;
                                                imageProxy.width= 150;
                                                DragManager.doDrag(dragInitiator, ds, event,imageProxy, 0, 0, 1.00);
                                                // this method works when click on the line button 
                                                // it is make enable to draw line
                                                public function doDrawEnable():void {
                                                private var fileRef:FileReference;
                                                public function createXML():void {
                                                var fileName:String = "component.xml";
                                                fileRef = new FileReference();
                                                // Draging code ends here
                                                private function onExpand(event:Event):void {
                                                         if ( == 1) {
                                                                panelRight.width = 0;
                                                                panelLeft.width = 200;
                                                         //       panelLeft.width=this.screen.width-100;
                                                private function onCollapse(event:Event):void{
                                                         if( == 1){
                                                                panelRight.width = 260;
                                                                panelLeft.width = 0;
                                              //   panelLeft.width=(this.width)/60;
        <mx:Fade id="theEffect"/>
        <mx:Resize id="resizeEffect" />
        <mx:ApplicationControlBar dock="true">          
                <mx:Image toolTip="Open" useHandCursor="true" buttonMode="true" mouseChildren="false" click="createXML()" />
                <mx:Image toolTip="Save" useHandCursor="true" buttonMode="true" mouseChildren="false" click="createXML()" />
                <mx:Image toolTip="Undo" useHandCursor="true" buttonMode="true" mouseChildren="false" />
                <mx:Image toolTip="Redo" useHandCursor="true" buttonMode="true" mouseChildren="false" />
                <mx:Image toolTip="Delete" useHandCursor="true" buttonMode="true" mouseChildren="false" />      
                <mx:Image toolTip="Print" useHandCursor="true" buttonMode="true" mouseChildren="false" />
                <mx:Spacer width="100%" />
                <mx:Label text="BackTesting" fontWeight="bold" fontSize="16" />
        <mx:Resize duration="500" id="r1"/>
        <local:CustomDividedBox width="100%" height="100%" direction="horizontal" expand="onExpand(event)" collapse="onCollapse(event)">
                <mx:VDividedBox id="panelLeft" height="100%" width="20%" resizeEffect="r1">
                        <mx:Panel title="Drawing Components" width="100%" height="100%" layout="vertical" >
                                <mx:Accordion id="accrWinComp" x="51" y="35" width="100%" height="100%">
                                        <mx:Panel label="Nodes" width="100%" height="100%" layout="vertical" borderThicknessTop="-20" paddingTop = "20" paddingLeft = "20" >
                                                <mx:Image id="box" toolTip="TwoWay Split" useHandCursor="true" buttonMode="true" source="@Embed(source='Images/box.png')" mouseMove="dragPicture1(event, box, 'box');myoffset(box);" width="28" height="28" ></mx:Image>
                                                <mx:Image id="rectangle" toolTip="MultiWay Split" useHandCursor="true" buttonMode="true" source="@Embed(source='Images/rectangle.png')" mouseMove="dragPicture1(event, rectangle, 'rectangle');myoffset(rectangle);" width="28" height="28" ></mx:Image>
                                                <mx:Image id="circle" toolTip="Reader" useHandCursor="true" buttonMode="true"  source="@Embed(source='Images/circle.png')" mouseMove="dragPicture1(event, circle, 'circle');myoffset(circle);" width="28" height="28" ></mx:Image>
                                                <mx:Button toggle="true" id="line" toolTip="Line" useHandCursor="true" buttonMode="true" icon="@Embed(source='Images/line.png')" click="doDrawEnable()" width="28" height="28"  x="279" y="10"></mx:Button>
                                        <mx:Panel label="Saved Components" width="100%" height="100%" borderThicknessTop="-20">
                                                <mx:List height="100%" width="100%" dataProvider="{savedComp}" />                                                                       
                <mx:VDividedBox id="mp" height="100%" width="100%">
                        <mx:HDividedBox width="100%" height="100%">                             
                                <mx:Canvas width="100%" height="100%" >
                                        <mx:TabBar x="0" y="10" dataProvider="viewstack1" />
                                        <mx:ViewStack id="viewstack1" width="100%" height="100%" y="32">
                                                <mx:Canvas backgroundColor="#ffffff" borderColor="0xB7BABC" borderStyle="solid" borderThickness="7" label="{propValue}" id="designArea" contextMenu="{cm}" dragEnter="pictureDragEnter(event)" dragDrop="pictureDragDrop(event)" width="100%" height="100%" >   
                                                <mx:Panel id="pnlXML" label="XML" width="100%" height="100%" showEffect="{theEffect}" >
                                                        <mx:ControlBar width="100%" barColor="#FF22CC">
                                                                <mx:Spacer width="100%"/>
                                                                <mx:Button id="btnSave" label="Save" useHandCursor="true" buttonMode="true" mouseChildren="false" click="createXML()" />                                        
                                                        <mx:TextArea fontSize="12" wordWrap="false" textIndent="8" id="txtAreaXML" text="{xm}" width="100%" height="100%" editable="false" />                                                           
                <mx:VDividedBox id="panelRight" height="100%" width="0" resizeEffect="{resizeEffect}" >
                        <!--<mx:Panel title="Component Properties" width="100%" height="100%" layout="vertical" >
                                <mx:Accordion id="accrWinProp" x="51" y="35" width="100%" height="100%">    -->                                                     
                                <mx:Panel id="accrCon2" title="Component Properties" width="100%" height="100%">
                                        <mx:DataGrid id="dgProp" dataProvider="{propData.prop}" height="100%" width="100%" editable="true" itemClick="itemClickEvent(event);">
                                                        <mx:DataGridColumn dataField="@key" headerText="Property" editable="false" />
                                                        <mx:DataGridColumn dataField="propvalue" headerText="Value" editable="true" />                                                                                                                                          

Open in new window

Question by:alamflex

    Author Comment

    LVL 29

    Expert Comment

    Hi Alam,
    You are asking 5 diffrent questions.
    Please split by categories.
    An answer for your original question how to change icon on diffrent states you can find here


    Author Comment

    Thanks for your reply,

    Here i want to change the button image not the icon.
    The example which you have provided in the link is for changing the icon but i need to change the image itself when user mouseover and mouseout the button.

    I hope you got my point.

    LVL 17

    Expert Comment

    use skinning properties like this:

    Warm Regards
    Deepanjan Das
    LVL 17

    Expert Comment

    sorry @alamflex, just found you opened a separate question for this. Can you please close any one of these.

    Warm Regards
    Deepanjan Das
    LVL 29

    Accepted Solution

    <?xml version="1.0" encoding="utf-8"?>
    <s:Application xmlns:fx="" 
    			   xmlns:mx="library://" width="100%" height="100%">
    			[Bindable] private var defaultImg:Class;
    			[Bindable] private var overImg:Class;
    			[Bindable] private var isOver:Boolean = false;
    		<s:VerticalLayout verticalAlign="middle" horizontalAlign="center"/>
    	<mx:Image source="{isOver ? overImg : defaultImg}" buttonMode="true" 
    			  mouseOver="isOver = true"  mouseOut="isOver = false"/>
    	<!-- OR -->
    	<mx:Image source="{defaultImg}" buttonMode="true" 
    			  mouseOver="event.currentTarget.source = overImg"  mouseOut="event.currentTarget.source = defaultImg"/>

    Open in new window


    Featured Post

    How to run any project with ease

    Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
    - Combine task lists, docs, spreadsheets, and chat in one
    - View and edit from mobile/offline
    - Cut down on emails

    Join & Write a Comment

    First things first - Preparation We need all the part for this install and it's much nicer to have them all on hand when you need them so here's what's required. Download Eclipse 3.5 32 bit (I like the Classic flavour) from here. (http://www.e…
    If you're not part of the solution, you're part of the problem.   Tips on how to secure IoT devices, even the dumbest ones, so they can't be used as part of a DDoS botnet.  Use PRTG Network Monitor as one of the building blocks, to detect unusual…
    In this sixth video of the Xpdf series, we discuss and demonstrate the PDFtoPNG utility, which converts a multi-page PDF file to separate color, grayscale, or monochrome PNG files, creating one PNG file for each page in the PDF. It does this via a c…
    In this seventh video of the Xpdf series, we discuss and demonstrate the PDFfonts utility, which lists all the fonts used in a PDF file. It does this via a command line interface, making it suitable for use in programs, scripts, batch files — any pl…

    731 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    15 Experts available now in Live!

    Get 1:1 Help Now