Datalist を使用して、画像をサムネイルとして車両に入力しています。ユーザーが小さな画像をクリックすると、onclick イベントはデータベースから画像を呼び出して、上の大きな画像コントロールにロードする必要があります。ImageHandler.ashx を使用して、SQL からイメージ バイナリを取得し、イメージ コントロールでレンダリングします。
Chrome と IE7 ではすべてが完璧に機能しますが、IE9 では機能しません。IE9 で小さな画像をクリックすると、画像ハンドラーが実行されず、選択した画像と共に大きな画像が読み込まれません。IE9 でページ ソースを表示すると、コードは次のようになります。
IE9 ページのソース:
<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>
サーバ側：
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 + "';");
}
}
マークアップ:
<!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>
誰かが助けてくれることを願っています。ありがとう