title: C# ASP.Net Image attribute with javascript onclick not working in IE9
body: <p>I'm using a Datalist to populate a vehicle with its images as thumbnails.
  When a user clicks on a small image, the onclick event needs to recall the image from the database and load it into an above bigger Image control.
  I'm using an ImageHandler.ashx, to retrieve the image binary from SQL and renders it in the image control.</p>
  
  <p>Everything works perfect in Chrome and IE7, but not working in IE9.
  If I click on the small image in IE9, its like the image handler never executes, the bigger image never gets loaded with the selected image. When viewing page source in IE9, the code looks as follows:</p>
  
  <p>IE9 Page source:</p>
  
  <pre><code>&lt;table id="table1" style="padding-left: 0px; padding-top: 0px; width: 108px; height: 73px;
          background-image: url('Images/smallimageframe.png'); background-repeat: no-repeat;
          background-color: #FFFFFF;"&gt;
          &lt;tr&gt;
              &lt;td align="center"&gt;
                  &lt;img id="DataListVehicles_ctl00_imgVehicle" class="imgOpacity" onerror="this.src='Images/no_image.jpg'" onclick="imgBig.src='ImageHandler.ashx?ID=29';" src="ImageHandler.ashx?ID=29" alt="29" style="border-style:None;height:55px;width:90px;border-width:0px;" /&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
  &lt;/td&gt;&lt;td class="DataList"&gt;
      &lt;table id="table1" style="padding-left: 0px; padding-top: 0px; width: 108px; height: 73px;
          background-image: url('Images/smallimageframe.png'); background-repeat: no-repeat;
          background-color: #FFFFFF;"&gt;
          &lt;tr&gt;
              &lt;td align="center"&gt;
                  &lt;img id="DataListVehicles_ctl01_imgVehicle" class="imgOpacity" onerror="this.src='Images/no_image.jpg'" onclick="imgBig.src='ImageHandler.ashx?ID=30';" src="ImageHandler.ashx?ID=30" alt="30" style="border-style:None;height:55px;width:90px;border-width:0px;" /&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
  &lt;/td&gt;&lt;td class="DataList"&gt;
      &lt;table id="table1" style="padding-left: 0px; padding-top: 0px; width: 108px; height: 73px;
          background-image: url('Images/smallimageframe.png'); background-repeat: no-repeat;
          background-color: #FFFFFF;"&gt;
          &lt;tr&gt;
              &lt;td align="center"&gt;
                  &lt;img id="DataListVehicles_ctl02_imgVehicle" class="imgOpacity" onerror="this.src='Images/no_image.jpg'" onclick="imgBig.src='ImageHandler.ashx?ID=31';" src="ImageHandler.ashx?ID=31" alt="31" style="border-style:None;height:55px;width:90px;border-width:0px;" /&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>Server side:</p>
  
  <pre><code>    protected void DataListVehicles_ItemDataBound(object sender, DataListItemEventArgs e)
      {
      if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
          {
              Image imgVehicle = e.Item.FindControl("imgVehicle") as Image;               
              imgVehicle.ImageUrl = "ImageHandler.ashx?ID=" + m_Vehicles.ListingPhotos[e.Item.ItemIndex].ID;
  
              imgVehicle.Attributes.Add("onclick", "imgBig.src='ImageHandler.ashx?ID=" + m_Vehicles.ListingPhotos[e.Item.ItemIndex].ID + "';"); 
          }
      }
  </code></pre>
  
  <p>Markup:</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head runat="server"&gt;
      &lt;meta http-equiv="Cache-Control" content="no-cache" /&gt;
      &lt;meta http-equiv="Pragma" content="no-cache" /&gt;
      &lt;meta http-equiv="Expires" content="0" /&gt;
      &lt;link href="css/asp.css" rel="stylesheet" type="text/css" /&gt;
  
      &lt;script src="Scripts/jquery-1.7.2.min.js" type="text/javascript"&gt;&lt;/script&gt;
  
      &lt;script type="text/javascript"&gt;
          $(function() {
              $('.imgOpacity').each(function() {
                  $(this).hover(
                      function() {
                          $(this).stop().animate({ opacity: 1.0 }, 500);
                      },
                     function() {
                         $(this).stop().animate({ opacity: 0.6 }, 500);
                     })
              });
          });
      &lt;/script&gt;
  
      &lt;title&gt;&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;form id="form1" runat="server"&gt;
      &lt;div&gt;
          &lt;table style="width: 780px" class="OtherControl"&gt;
              &lt;tr&gt;
                  &lt;td style="padding-left: 8px; padding-top: 3px;"&gt;
                      &lt;asp:Label ID="lblDescription" runat="server" Font-Bold="True" ForeColor="#FF9900"&gt;&lt;/asp:Label&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;
                      &lt;table style="width: 100%"&gt;
                          &lt;tr&gt;
                              &lt;td align="center"&gt;
                                  &lt;table style="padding-left: 0px; padding-top: 0px; width: 320px; height: 220px; background-image: url('Images/imageframe.png');
                                      background-repeat: no-repeat; background-color: #FFFFFF;"&gt;
                                      &lt;tr&gt;
                                          &lt;td align="center"&gt;
                                              &lt;asp:Image ID="imgBig" runat="server" Height="200px" Width="300px" onerror="this.src='Images/no_image.jpg'"/&gt;
                                          &lt;/td&gt;
                                      &lt;/tr&gt;
                                  &lt;/table&gt;
                                  &lt;asp:DataList ID="DataListVehicles" runat="server" RepeatDirection="Horizontal" RepeatColumns="4"
                                      ShowFooter="False" ShowHeader="False" BorderStyle="None" OnItemDataBound="DataListVehicles_ItemDataBound"
                                      HorizontalAlign="Center"&gt;
                                      &lt;ItemStyle CssClass="DataList" /&gt;
                                      &lt;ItemTemplate&gt;
                                          &lt;table id="table1" style="padding-left: 0px; padding-top: 0px; width: 108px; height: 73px;
                                              background-image: url('Images/smallimageframe.png'); background-repeat: no-repeat;"&gt;
                                              &lt;tr&gt;
                                                  &lt;td align="center"&gt;
                                                      &lt;asp:Image ID="imgVehicle" runat="server" CssClass="imgOpacity" Width="90px" Height="55px"
                                                          onerror="this.src='Images/no_image.jpg'" BorderStyle="None" /&gt;
                                                  &lt;/td&gt;
                                              &lt;/tr&gt;
                                          &lt;/table&gt;
                                      &lt;/ItemTemplate&gt;
                                  &lt;/asp:DataList&gt;
                              &lt;/td&gt;
                          &lt;/tr&gt;            
                      &lt;/table&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
          &lt;/table&gt;
      &lt;/div&gt;
      &lt;/form&gt;
  &lt;/body&gt;
  &lt;/html&gt;  
  </code></pre>
  
  <p>Hope someone can help.
  Thanks</p>