1
我正在使用Datalist以其縮略圖的形式填充車輛。 當用戶點擊一個小圖像時，onclick事件需要從數據庫中調用圖像並將其加載到上方較大的圖像控件中。 我正在使用ImageHandler.ashx，從SQL中檢索圖像二進制文件並將其呈現在圖像控件中。C＃ASP.Net使用javascript onclick的圖像屬性在IE9中不起作用
在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>
希望有人能幫幫我。 感謝
我會試一試謝謝你。 IE開發人員工具提供以下錯誤onclick： SCRIPT5009：'imgBig'未定義。 希望你的改變能解決這個問題，很快就會回覆你。 – Deon
你原來的代碼假設變量'imgBig'是在範圍內定義的，這取決於瀏覽器並不總是如此。或者，因爲您已經在使用JQuery，您可以執行'$（'＃imgBig'）。attr（'src'）='...'，它應該可以跨瀏覽器工作。最後爲了保證服務端代碼的完整性，你應該使用''（'＃'+ imgBig.ClientID +''）.attr（'src'）= ...'來獲取爲imgBig生成的客戶端ID。在你的情況下沒有什麼不同，但是如果imgBig在面板或其他控件中，客戶端ID最終可能會被ASP.NET裝飾。 – LambyPie
很好，謝謝你，感謝JQuery提示！ – Deon