AJAX

image breaking

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

•

Join Date: Aug 2007

Posts: 129

Reputation: hacker9801 is on a distinguished road

Solved Threads: 15

hacker9801 hacker9801 is offline

Offline

Junior Poster

image breaking

Mar 30th, 2008

Hello.

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

 Help with Code Tags 
 javascript Syntax (Toggle Plain Text) 
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);
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

 Help with Code Tags 
 javascript Syntax (Toggle Plain Text) 
map.innerHTML = "<img src=\"tiles/grass.gif\" width=\"32\" height=\"32\" class=\"brick\">";
map.innerHTML = "<img src=\"tiles/grass.gif\" width=\"32\" height=\"32\" class=\"brick\">";

also, same thing.

Any ideas?

•

Join Date: Aug 2007

Posts: 129

Reputation: hacker9801 is on a distinguished road

Solved Threads: 15

hacker9801 hacker9801 is offline

Offline

Junior Poster

Re: image breaking

Mar 31st, 2008

anyone?!

•

Join Date: Aug 2007

Posts: 129

Reputation: hacker9801 is on a distinguished road

Solved Threads: 15

hacker9801 hacker9801 is offline

Offline

Junior Poster

Re: image breaking

Apr 1st, 2008

come on, someone has to know

way to not deliver. you fail.

•

Join Date: Apr 2005

Posts: 1,402

Reputation: ShawnCplus is a glorious beacon of light

Solved Threads: 225

ShawnCplus ShawnCplus is offline

Offline

Code Monkey

Re: image breaking

Apr 1st, 2008

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?

GCS d- s+ a-->? C++(++++) UL+++ P+>+++ L+++ E--- W+++
N+ o K w++(---) O? !M- V PS+>++ PE+ Y+ PGP !t- 5? X- R tv+
b+>++ DI+ D G++>+++ e+ h+>++ r y+
PMs asking for help will not be answered, post on the forums. That's what they're there for.

•

Join Date: Aug 2007

Posts: 129

Reputation: hacker9801 is on a distinguished road

Solved Threads: 15

hacker9801 hacker9801 is offline

Offline

Junior Poster

Re: image breaking

Apr 2nd, 2008

•

Originally Posted by ShawnCplus

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.

•

Join Date: Apr 2005

Posts: 1,402

Reputation: ShawnCplus is a glorious beacon of light

Solved Threads: 225

ShawnCplus ShawnCplus is offline

Offline

Code Monkey

Re: image breaking

Apr 2nd, 2008

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.

•

Join Date: Aug 2007

Posts: 129

Reputation: hacker9801 is on a distinguished road

Solved Threads: 15

hacker9801 hacker9801 is offline

Offline

Junior Poster

Re: image breaking

Apr 2nd, 2008

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

 Help with Code Tags 
 javascript Syntax (Toggle Plain Text) 
        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"));
                }
        }
        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"));
                }
        }