Create item background image

I am trying to create a javascript width table and createElement (). My problem is that it does not set the background image (just white). However, if I set innerHTML to an image tag with the same path, it works!

create : function () {
    var tbody = document.createElement('tbody');
    for(i in this.map) {
        var tr = document.createElement('tr');
        for(j in this.map[i]) {
            var td = document.createElement('td');
            var cell = this.map[i][j];
            td.style.color = "red";
            console.log("gfx/tile_"+this.backgrounds[cell]+".png");
            td.style.backgroundImage = "url(gfx/tile_"+this.backgrounds[cell]+".png);";
            td.innerHTML = "j";
            tr.appendChild(td);
        }
        tbody.appendChild(tr);
    }
    this.gameDOMelm.appendChild(tbody);
}

I also have another problem that there is a space between each ROW in the table. Here is the DOM element that I am adding:

<table id="gameField" cellpadding="0" cellspacing="0"></table>

And CSS

    * {padding: 0; margin: 0;}
    td {
        min-width: 32px;
        min-height: 32px;
        width: 32px;
        height: 32px;
    }

These issues occur in both Chrome and FF @ubuntu 11.04. The javascript console does not display errors.

  • jack
+3
source share
1 answer

Try it "url('gfx/tile_"+this.backgrounds[cell]+".png')"(with single quotes around the url).

+3
source

All Articles