another onmouseover problem this one concerns pictures

Question

Hi all! have problems with mouseover in Mozilla and Chrome after making it work in IE, for sure I can tell you that my code woked perfectly in Chrome at least, cause thats my default browser and I used it for debuging when creating the javascipt and it worked nicely... until I tried to make it work in IE too.

Here I post the full code of the webpage I'm having trouble with.

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

.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;}

---

    <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>

hope you guys can solve it for me, going mad!

best regards David

Answer 1

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


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

Hope this helps

Answer 2

Thanks for your reply John. I've figured out the problem, and it was not the code that was wrong. It was my own fault, created a div to contain a picuture on the left hand side. Problem was that the div did not think the left hand side was enough but covered full width of the page there by hideing the pictures behind it:P Well hope this helps someone else doing the same mistake in the future.

regards David