Hello.

I'm using JS/DOM to create a map in a <div>, named map, like this:

var tile = document.createElement("IMG");
tile.src = "tiles/" + node.getAttribute("type");
tile.setAttribute("width", "32");
tile.setAttribute("height", "32");
tile.className = "brick";
map.appendChild(tile);

It works, but the image breaks on a <br/>
(screenshot: http://i28.tinypic.com/6ynu3o.png)
the image is a 32x32 tile of grass.

It shouldn't have those breaks.

I've tried

map.innerHTML = "<img src=\"tiles/grass.gif\" width=\"32\" height=\"32\" class=\"brick\">";

also, same thing.

Any ideas?

Why would you create multiple instances of the same image with DOM manipulation instead of just setting the background image on the div with css which will automatically tile the image?

Why would you create multiple instances of the same image with DOM manipulation instead of just setting the background image on the div with css which will automatically tile the image?

because it's an XML map, it can have different images. ;)

Well, that's a detail you did not expound upon. Also showing us an entire page instead of 5 lines of code would help. It's a bit hard to debug an image.

Okay, so I'm parsing the map file, looping through the nodes, and adding an image based on the XML file:

for(var i=0;i<map_node.childNodes.length;i++) {
                var node = map_node.childNodes[i];
                if(typeof node.tagName == "undefined") continue;

                if(node.tagName == "tile") {
                    var tile = document.createElement("IMG");
                    tile.src = "tiles/" + node.getAttribute("type");
                    tile.setAttribute("width", "32");
                    tile.setAttribute("height", "32");
                    tile.className = "brick";
                    map.appendChild(tile);
                }

                if(node.tagName == "br") map.appendChild(document.createElement("BR"));
                }
        }

"map" is blanked, then that code executes & adds those images.

I still see no reason for it to break.

This article has been dead for over six months. Start a new discussion instead.