1

我正在使用 Datalist 将车辆的图像作为缩略图填充。当用户点击一个小图像时，onclick 事件需要从数据库中调用该图像并将其加载到上面更大的 Image 控件中。我正在使用 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>

希望有人可以提供帮助。谢谢

4

2 回答 2

0

代替

imgVehicle.Attributes.Add("onclick", "imgBig.src='ImageHandler.ashx?ID=" + m_Vehicles.ListingPhotos[e.Item.ItemIndex].ID + "';");

试试这个

imgVehicle.Attributes.Add("onclick", imgBig.ClientID + ".src='ImageHandler.ashx?ID=" + m_Vehicles.ListingPhotos[e.Item.ItemIndex].ID + "';");

在DataListVehicles_ItemDataBound

于 2012-06-11T12:09:31.937 回答
0

这可能是您从 onClick JavaScript 中引用“imgBig”的方式，您可以尝试使用 document.getElementById('imgBig').src='.... 代替。当您单击图像时，您是否还打开了 IE 开发人员工具窗口并检查了 JavaScript 错误？

于 2012-06-11T12:13:17.487 回答