Ajax Widgets Demo

Playing with widgets

Exploring different styles of widget architecture and invocation

Google Video

Flash app, Flash embed invocation

Blog Ticker

Javascript app, Javascript invocation

Sprout Movies

Flash app, Javascript invocation

Last Fm

Flash app, Javascript invocation, customised

<style type="text/css">table.lfmWidget28a349a777dbfa190d2d9e435fd28978 td {margin:0 !important;padding:0 !important;border:0 !important;}table.lfmWidget28a349a777dbfa190d2d9e435fd28978 tr.lfmHead a:hover {background:url(http://cdn.last.fm/widgets/images/en/header/quilt/album_horizontal_red.png) no-repeat 0 0 !important;}table.lfmWidget28a349a777dbfa190d2d9e435fd28978 tr.lfmEmbed object {float:left;}table.lfmWidget28a349a777dbfa190d2d9e435fd28978 tr.lfmFoot td.lfmConfig a:hover {background:url(http://cdn.last.fm/widgets/images/en/footer/red_np.png) no-repeat 0px 0 !important;;}table.lfmWidget28a349a777dbfa190d2d9e435fd28978 tr.lfmFoot td.lfmView a:hover {background:url(http://cdn.last.fm/widgets/images/en/footer/red_np.png) no-repeat -85px 0 !important;}table.lfmWidget28a349a777dbfa190d2d9e435fd28978 tr.lfmFoot td.lfmPopup a:hover {background:url(http://cdn.last.fm/widgets/images/en/footer/red_np.png) no-repeat -159px 0 !important;}</style>
<table class="lfmWidget28a349a777dbfa190d2d9e435fd28978" cellpadding="0" cellspacing="0" border="0" style="width:460px;"><tr class="lfmHead"><td><a title="latin" href="http://www.last.fm/listen/globaltags/latin" target="_blank" style="display:block;overflow:hidden;height:20px;width:460px;background:url(http://cdn.last.fm/widgets/images/en/header/quilt/album_horizontal_red.png) no-repeat 0 -20px;text-decoration:none;border:0;"></a></td></tr><tr class="lfmEmbed"><td><object type="application/x-shockwave-flash" data="http://cdn.last.fm/widgets/quilt/13.swf" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="460" height="225" > <param name="movie" value="http://cdn.last.fm/widgets/quilt/13.swf" /> <param name="flashvars" value="type=tag&variable=latin&file=topalbums&bgColor=red&theme=red&lang=en&widget_id=28a349a777dbfa190d2d9e435fd28978" /> <param name="bgcolor" value="d01f3c" /> <param name="quality" value="high" /> <param name="allowScriptAccess" value="always" /> <param name="allowNetworking" value="all" /> </object></td></tr><tr class="lfmFoot"><td style="background:url(http://cdn.last.fm/widgets/images/footer_bg/red.png) repeat-x 0 0;text-align:right;"><table cellspacing="0" cellpadding="0" border="0" style="width:460px;"><tr><td class="lfmConfig"><a href="http://www.last.fm/widgets/?url=globaltags%2Flatin&colour=red&quiltType=album&orient=horizontal&height=large&from=code&widget=quilt" title="Get your own widget" target="_blank" style="display:block;overflow:hidden;width:85px;height:20px;float:right;background:url(http://cdn.last.fm/widgets/images/en/footer/red_np.png) no-repeat 0px -20px;text-decoration:none;border:0;"></a></td><td class="lfmView" style="width:74px;"><a href="http://www.last.fm/" title="Visit Last.fm" target="_blank" style="display:block;overflow:hidden;width:74px;height:20px;background:url(http://cdn.last.fm/widgets/images/en/footer/red_np.png) no-repeat -85px -20px;text-decoration:none;border:0;"></a></td><td class="lfmPopup"style="width:25px;"><a href="http://www.last.fm/widgets/popup/?url=globaltags%2Flatin&colour=red&quiltType=album&orient=horizontal&height=large&from=code&widget=quilt&resize=1" title="Load this quilt in a pop up" target="_blank" style="display:block;overflow:hidden;width:25px;height:20px;background:url(http://cdn.last.fm/widgets/images/en/footer/red_np.png) no-repeat -159px -20px;text-decoration:none;border:0;" onclick="window.open(this.href + '&resize=0','lfm_popup','height=325,width=510,resizable=yes,scrollbars=yes'); return false;"></a></td></tr></table></td></tr></table>