another onmouseover problem this one concerns pictures

Posted by user334118 on Stack Overflow See other posts from Stack Overflow or by user334118
Published on 2010-05-06T06:04:26Z Indexed on 2010/05/06 6:08 UTC
Read the original article Hit count: 272

Filed under:
|
|
|

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

© Stack Overflow or respective owner

Related posts about c#

Related posts about javascript-events