Question

在使用IE浏览器后，鼠标悬停在Mozilla和Chrome上有问题，我肯定可以告诉你，我的代码至少在Chrome中完美地唤醒了，因为这是我的默认浏览器，我在创建javascipt时使用它进行debuging它工作得很好......直到我试图让它在IE中运行。

在这里，我发布了我遇到问题的网页的完整代码。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebbShop.aspx.cs" Inherits="FSwebportal.WebbShop" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">  
<style> 
.prodShow{width: 100%; text-align:center;border:0; float:right; position:inherit; padding-left:310px;}
#prodFollow{display:block; width:100%; height:100%; position:fixed; overflow:hidden;}
#orderSett{display:block; position:relative; float:left; padding-top:inherit;}
.ShowBig{width:290px;height:290px; padding-top:10px;}
.pTb{width:50px;}
.order{background-color:Transparent;margin:3px;}
.txtArea{border:0;overflow:auto;width:200px;height:100px;}
.prodRow{background-image:url("produktbakgrund.png"); background-repeat:repeat;}
.row{background-color:Transparent;width:100%;margin: 0px auto;display:inline-table;}
.col{background-color:Transparent;width:100%;margin:3px;}
</style>
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <center><input type="button" value="Visa allt" onclick="javascript:appendRow()" class="append_row" /></center>
        <hr />

        <div id="prodFollow">
            <table id="dumbTable">
                <tr>
                    <td>
                        <img id="sideImg" class="ShowBig" src="" alt=""/>
                    </td>
                </tr>
                <tr>
                    <td>
                        <h3><b>Specifikationer:</b></h3>
                        <select name="">
                        </select>
                    </td>
                </tr>
            </table>
        </div>

        <table id="itemList" class="prodShow" cellspacing="0">
            <thead>
                <tr class="prodRow">
                    <th>Bild</th>
                    <th>Förklaring</th>
                    <th>Artikelnummer</th>
                    <th>Pris</th>
                </tr>
            </thead>
        </table>

        <script type="text/javascript">
                function appendRow() {
                    var tbl = document.getElementById('itemList');


                    var len = <%= aspInfo.Count %>;
                    var arr = new Array(len);
                    var currIndex = 0;
                    var imgID=0;

                    <%
                        for (int x = 0; x < aspInfo.Count; x++) {
                                Response.Write("arr["+x+"]= '"+ aspInfo[x]+"';");
                        }
                    %>

                    for(row =0; row < arr.length/4;row++)
                    {
                    var rad = tbl.insertRow(tbl.rows.length);
                    rad.setAttribute('class','prodRow');
                        for (c = 0; c < tbl.rows[row].cells.length; c++) 
                        {
                                if(c < 1)
                                {
                                    createCell(rad.insertCell(c), arr[currIndex], 'col',imgID);
                                    imgID++;
                                }
                                else {
                                    if(c < 3)
                                    {
                                        createCell(rad.insertCell(c),"<Label class=txtArea>" + arr[currIndex] + "</Label>", 'row',imgID);
                                    }
                                    else
                                    {
                                        createCell(rad.insertCell(c),"<Label class=txtArea>" + arr[currIndex] + " SKR</Label><br>Antal:<input type=text class=pTb /><input type=button width=100px value='Lägg i varukorg'></input>", 'order',imgID);
                                    }
                                }
                                currIndex++;
                        }
                    }
                }

                function createCell(cell, text, style,imgID) {
                    if (style == 'col') {
                        var arrLen = <% = largeImg.Count %>;
                        var imgArr = new Array(arrLen);

                        <%
                        for (int x = 0; x < largeImg.Count; x++) {
                                Response.Write("imgArr["+x+"]= '"+ largeImg[x]+"';");
                        }
                        %>

                        var div = document.createElement('div');
                        div.setAttribute('class', style);
                        div.setAttribute('className', style);
                        div.innerHTML = "<a href='#'><img id='" + imgID + "' src='" + text + "' onmouseover=javascript:onImg('" + imgArr[imgID] + "')  border='0' alt='Animg' /></a>"; 
                        cell.appendChild(div);
                    }
                    else {
                        var div = document.createElement('div');
                        div.setAttribute('class', style);
                        div.setAttribute('className', style);
                        div.innerHTML = text;
                        cell.appendChild(div);
                    }
                }
    </script>
    <script type="text/javascript" language="javascript">
                    function onImg(bigImg) {
                        var img = document.getElementById('sideImg#');
                        img.src = bigImg;

                        alert(img.src.toString());
                    }
    </script>
    </form>
</body>
</html>

希望你们能为我解决它，发疯了！

最好的问候大卫

Answer 1

// wrong var img = document.getElementById('sideImg#');


var img = document.getElementById('#sideImg');

希望这有帮助

Answer 2

感谢John的回复。我已经弄清楚了问题，并不是代码错了。这是我自己的错，创建了一个div，在左侧包含一个图片。问题是div不认为左侧是足够的，但是通过隐藏它背后的图片覆盖了页面的整个宽度：P 希望这有助于其他人在将来犯同样的错误。

尊敬大卫

onmouseover for Firefox和Chrome中的图片

2 个答案: