
<animation>
<title>Ajax interactive demo</title>
<style>
<!--
# data_set a{font-family:verdana;color:gray; text-decoration:none;font-size:11px;}
-->
</style>

<div id="data">
<table>
<tr>
<td align="left">
<div style="font-family:verdana;font-size:11px;color:gray" context="Widgetplus^http://www.widgetplus.com;Xindesk^http://www.xindesk.com;Xindesk blog^http://www.xindesk.com/blog">
<img id="pic" src="http://www.widgetplus.com/generic/peng.png" galleryimg="no" border="0" style="height:30px;width:30px;border:black 1px solid" />
<br/>
<input id="im" type="text" value="" style="font-family:verdana;font-size:11px;color:black;width:200px" /> Image<br/>
<input id="na" type="text" value="" style="font-family:verdana;font-size:11px;color:black;width:200px" /> Name<br/>
<input id="se" type="text" value="" style="font-family:verdana;font-size:11px;color:black;width:200px" /> Sex<br/><br/>
<a style="font-family:verdana;color:red;text-decoration:none;font-size:12px" 
 href="javascript:xin.add_win('data_set','Data',2,2,370,120,350,350,'black','','http://www.widgetplus.com/generic/gears.png');xin.widget_call('http://www.naltabyte.se/widgets/data.xml','','data_set','data',1)">
Change data settings</a>  <br/>
</div>
</td>
</tr>
</table>
<input type="hidden" value="Elf" id="wierd" />
</div>


<div id="data_set">
<div  style="text-align:center;font-family:verdana;font-size:11px;color:gray">
<table style="margin-left:auto;margin-right:auto">
<tr align="left">
<td style="border-right:black 1px solid">
<div style="padding:3px;font-family:verdana;font-size:11px;color:gray">
Chose image:<br/>
<a load="att(im,'value','Chess icon');att(pic,'src','http://www.widgetplus.com/generic/chess.png')" box="data">Chess</a><br/>
<a load="att(im,'value','Calendar icon');att(pic,'src','http://www.widgetplus.com/generic/calendar.png')" box="data">Calendar</a><br/>
<a load="att(im,'value','Chat icon');att(pic,'src','http://www.widgetplus.com/generic/chat.png')" box="data">Chat</a>
</div>
</td>
<td style="border-right:black 1px solid">
<div style="padding:3px;font-family:verdana;font-size:11px;color:gray">
Chose name:<br/>
<a load="att(na,'value','Mike')" box="data">Mike</a><br/>
<a load="att(na,'value','Calvin')" box="data">Calvin</a><br/>
<a load="att(na,'value','Tracy')" box="data">Tracy</a>
</div>
</td>
<td>
<div style="padding:3px;font-family:verdana;font-size:11px;color:gray">
Chose sex:<br/>
<a load="att(se,'value','Male')" box="data">Male</a><br/>
<a load="att(se,'value','Female')" box="data">Female</a><br/>
<a load="att(se,'value','Dunno')" box="data">Dunno</a><br/>
<a load="att(se,'value',value[wierd])" box="data">Wierd</a>
</div>
</td>
</tr>
</table>
</div>
</div>




</animation>