Set element property in Javascript when called from Update Panel

Question

There are two data controls for viewing images. The first Datalist shows a series of small images.When ImageButton clicked a corresponding image is displayed in the FormView control below.

I have placed the FormView inside a Update Panel.

i want to set Datalist Image opacity level and disable when ImageButton is clicked and at same time reset all other Images in the list to default values.

Likewise,when i click the LinkButtons in FormView the same function routine run to set corresponding Image Opacity and Disable property.

Both controls share the same identity ID values so when FormView LinkButton clicked to show next or previous image i want to find a match ID on Datalist image elements to set the correct opacity and Disable property.

 

I originally set element properties erver side but it is a waste to postback Datalist data to server on every click when i only need to load data once in page load. 

<asp:DataList ID = "DataList1" runat="server" OnSelectedIndexChanged="DataList1_SelectedIndexChanged" RepeatColumns="4" RepeatDirection="Horizontal" DataKeyField="productID"

>

<ItemTemplate>

<table border="0" >

<tr>

<td><%# Eval("ID") %></td>

</tr>

<tr>

<td>

<asp:ImageButton ImageUrl='<%#GetiMAGE(Eval("ID"))%>' ID="ImageButton1" runat="server" />

<div id="morepictures"><%# Eval("ContentType") %>

</div>

</td>

</tr>

</table>

</ItemTemplate>

</asp:DataList>

<asp:UpdatePanel ID = "UpdatePanel1" runat="server" >

<ContentTemplate>

<asp:FormView ID="frmBooks" Runat="server" AllowPaging="True" DataSourceID="SqlDataSource1" DataKeyNames="ID">

<ItemTemplate>

<div>

ID:

<asp:Label ID="IDLabel" runat="server" Text='<%# Eval("ID") %>' />

<br />

Description:

<asp:Label ID="DescriptionLabel" runat="server" Text='<%# Bind("Description") %>' />

<br />

<asp:Image ID="Image1" runat="server" OnClientClick="UpdateValues(evt)" ImageUrl='<%# FormatURL(DataBinder.Eval(Container.DataItem, "ID")) %>' />

<br />

</div>

</ItemTemplate>

<PagerTemplate>

<div style="float:right;white-space:nowrap">

<asp:LinkButton ID="lnkPrevious" Runat="server" CommandArgument="Prev" OnClientClick="UpdateValues(evt)" CommandName="Page" Text="Previous" />

<asp:LinkButton ID="lnkNext" Runat="server" CommandArgument="Next" OnClientClick="UpdateValues(evt)" CommandName="Page" Text="Next" />

</div>

</PagerTemplate>

</asp:FormView>

</ContentTemplate>

</asp:UpdatePanel>

 

function UpdateValues(evt) {

var element = foo.getElementsByTagName("img");

element.style.opacity = "0.4";

element.disabled = true;

}