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.
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:
IE9 Page source:
<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;">
<tr>
<td align="center">
<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;" />
</td>
</tr>
</table>
</td><td class="DataList">
<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;">
<tr>
<td align="center">
<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;" />
</td>
</tr>
</table>
</td><td class="DataList">
<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;">
<tr>
<td align="center">
<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;" />
</td>
</tr>
</table>
Server side:
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 + "';");
}
}
Markup:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<link href="css/asp.css" rel="stylesheet" type="text/css" />
<script src="Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$('.imgOpacity').each(function() {
$(this).hover(
function() {
$(this).stop().animate({ opacity: 1.0 }, 500);
},
function() {
$(this).stop().animate({ opacity: 0.6 }, 500);
})
});
});
</script>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<table style="width: 780px" class="OtherControl">
<tr>
<td style="padding-left: 8px; padding-top: 3px;">
<asp:Label ID="lblDescription" runat="server" Font-Bold="True" ForeColor="#FF9900"></asp:Label>
</td>
</tr>
<tr>
<td>
<table style="width: 100%">
<tr>
<td align="center">
<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;">
<tr>
<td align="center">
<asp:Image ID="imgBig" runat="server" Height="200px" Width="300px" onerror="this.src='Images/no_image.jpg'"/>
</td>
</tr>
</table>
<asp:DataList ID="DataListVehicles" runat="server" RepeatDirection="Horizontal" RepeatColumns="4"
ShowFooter="False" ShowHeader="False" BorderStyle="None" OnItemDataBound="DataListVehicles_ItemDataBound"
HorizontalAlign="Center">
<ItemStyle CssClass="DataList" />
<ItemTemplate>
<table id="table1" style="padding-left: 0px; padding-top: 0px; width: 108px; height: 73px;
background-image: url('Images/smallimageframe.png'); background-repeat: no-repeat;">
<tr>
<td align="center">
<asp:Image ID="imgVehicle" runat="server" CssClass="imgOpacity" Width="90px" Height="55px"
onerror="this.src='Images/no_image.jpg'" BorderStyle="None" />
</td>
</tr>
</table>
</ItemTemplate>
</asp:DataList>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
Hope someone can help.
Thanks
It could be the way you are referring to “imgBig” from the onClick JavaScript, you could try using document.getElementById(‘imgBig’).src=’…. instead. Also have you opened the IE developer tools window and checked for JavaScript errors when you click the image?