# aardio 范例: plus 控件 - 图像热点效果



```aardio
//plus 控件 - 图像热点效果
//plus 控件使用指南: https://www.aardio.com/zh-cn/docs/library-guide/std/win/ui/ctrl/plus.html
import inet.http;
import win.ui;
/*DSG{{*/
mainForm = win.form(text="太阳系";right=631;bottom=591;border="none")
mainForm.add(
plusEarth={cls="plus";text="地球";left=444;top=181;right=536;bottom=273;border={radius=-1};notify=1;z=3};
plusJupiter={cls="plus";text="木星";left=268;top=319;right=360;bottom=411;border={radius=-1};notify=1;z=5};
plusMars={cls="plus";text="火星";left=95;top=321;right=187;bottom=413;border={radius=-1};notify=1;z=6};
plusMercury={cls="plus";text="水星";left=92;top=181;right=184;bottom=273;border={radius=-1};notify=1;z=1};
plusMoon={cls="plus";text="月球";left=356;top=45;right=448;bottom=137;border={radius=-1};notify=1;z=10};
plusNeptune={cls="plus";text="海王星";left=268;top=460;right=360;bottom=552;border={radius=-1};notify=1;z=8};
plusPluto={cls="plus";text="冥王星";left=443;top=460;right=535;bottom=552;border={radius=-1};notify=1;z=9};
plusSaturn={cls="plus";text="土星";left=444;top=320;right=536;bottom=412;border={radius=-1};notify=1;z=4};
plusSun={cls="plus";text="太阳";left=176;top=40;right=280;bottom=144;border={radius=-1};notify=1;z=11};
plusUranus={cls="plus";text="天王星";left=94;top=458;right=186;bottom=550;border={radius=-1};notify=1;z=7};
plusVenus={cls="plus";text="金星";left=268;top=181;right=360;bottom=273;border={radius=-1};notify=1;z=2}
)
/*}}*/

/*
如果在窗体设计器中指定背景图像，可以直接设置九宫格切图效果。
否则可用下面的代码配置窗体九宫格切图参数，参数都为 0 则等同于拉伸图像。
*/
with mainForm{bkLeft=0;bkTop=0;bkRight=0;bkBottom=0} //先配置九宫格，再指定图像才能自动拉伸

//加载网络图像作为窗口背景，加载工程中的图像更快一些。
mainForm.image = "http://download.aardio.com/demo/images/solar.jpg";

//遍历窗口上的所有 plus 控件
for( name,ctrl in mainForm.eachControl("plus") ){
    
    //设置 plus 控件样式
	ctrl.skin({ 
		background = { 
			hover = 0xA0E0E000;
			active = 0xE0008080;
		}
		foreground = { 
			hover = 0x00000001;
			active = 0x00000001;
		}
	})

	//启用 plus 控件的径向渐变效果
	ctrl.linearGradient = -1;
	
	//响应 plus 控件的点击事件
	ctrl.oncommand = function(id,event){
		
		//创建子窗口
		mainForm.msgbox(ctrl.text)
	}
}

//自绘标题栏
import win.ui.simpleWindow2;
win.ui.simpleWindow2(mainForm);

//显示窗口
mainForm.show();

//启动界面线程消息循环
win.loopMessage();
```