Dynamic animation

[Dashley]

I'm just starting out using the anamation extender.
I have my succesfull first try working using static values. I'm trying to make it dynamic and am getting my tail kicked.

Lets say I pull 25 items from the db into a dataset (This I can do) I want to populate a page with the items and when I click on the button link have the information displayed on the popup animation panel. The dataase and dataset etc.. I can do. How do I pass the values is the question.

Thanks


The button link below calls the animation which works.

<div id="booknbr">
<divAustin J. &nbsp;&nbsp;&nbsp;&nbsp;
<!-- Button used to launch the animation -->
<asp:LinkButton ID="btninfo" runat="server" OnClientClick="return false;" Text="Persuasion"/>
&nbsp;&nbsp;&nbsp;&nbsp;
1853260568  nbsp;&nbsp;&nbsp;&nbsp;  3.99
<img src="thumb/1853260282.jpg" width="45" height="72" border="0"></a>
</strong></div>     </div>

The script used to open the animation (A MS sample)

<ajaxToolkit:AnimationExtender id="OpenAnimation" runat="server" TargetControlID="btnInfo">
   <Animations>
      <OnClick>
               <Sequence>
  
     <EnableAction Enabled="false" />
  
   <ScriptAction Script="Cover($get('btnInfo'), $get('flyout'));" />
  <StyleAction AnimationTarget="flyout" Attribute="display" Value="block"/>
     
   <Parallel AnimationTarget="flyout" Duration=".3" Fps="25">
    <Move Horizontal="150" Vertical="-50" />
  <Resize Width="260" Height="280" />
     <Color PropertyKey="backgroundColor" StartValue="#AAAAAA" EndValue="#FFFFFF" />
    </Parallel>
 
     <ScriptAction Script="Cover($get('flyout'), $get('info'), true);" />
               <StyleAction AnimationTarget="info" Attribute="display" Value="block"/>
               <FadeIn AnimationTarget="info" Duration=".2"/>
               <StyleAction AnimationTarget="flyout" Attribute="display" Value="none"/>
               </Sequence>
            </OnClick>
         </Animations>
      </ajaxToolkit:AnimationExtender>

the JS is

   <script type="text/javascript" language="javascript">
      // Move an element directly on top of another element (and optionally
      // make it the same size)
      function Cover(bottom, top, ignoreSize) {
         var location = Sys.UI.DomElement.getLocation(bottom);
         top.style.position = 'absolute';
         top.style.top = location.y + 'px';
         top.style.left = location.x + 'px';
         if (!ignoreSize) {
             top.style.height = bottom.offsetHeight + 'px';
             top.style.width = bottom.offsetWidth + 'px';
             }
         }
      </script>
[code/]