•
•
•
•
What is DaniWeb IT Discussion Community?
You're currently browsing the JavaScript / DHTML / AJAX section within the Web Development category of DaniWeb, a massive community of 374,179 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 3,405 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.
Please support our JavaScript / DHTML / AJAX advertiser: Lunarpages Web Hosting
Views: 822 | Replies: 8
![]() |
•
•
Join Date: Aug 2007
Posts: 128
Reputation:
Rep Power: 1
Solved Threads: 12
Hello.
I'm using JS/DOM to create a map in a <div>, named map, like this:
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
also, same thing.
Any ideas?
I'm using JS/DOM to create a map in a <div>, named map, like this:
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);
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
javascript Syntax (Toggle Plain Text)
map.innerHTML = "<img src=\"tiles/grass.gif\" width=\"32\" height=\"32\" class=\"brick\">";
Any ideas?
•
•
Join Date: Apr 2005
Location: New York state
Posts: 442
Reputation:
Rep Power: 5
Solved Threads: 65
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 z+*
N+ o K w++(---) O? !M- V PS+>++ PE+ Y+ PGP !t- 5? X- R tv+
b+>++ DI+ D G++>+++ e+ h+>++ r z+*
•
•
Join Date: Apr 2005
Location: New York state
Posts: 442
Reputation:
Rep Power: 5
Solved Threads: 65
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.
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 z+*
N+ o K w++(---) O? !M- V PS+>++ PE+ Y+ PGP !t- 5? X- R tv+
b+>++ DI+ D G++>+++ e+ h+>++ r z+*
•
•
Join Date: Aug 2007
Posts: 128
Reputation:
Rep Power: 1
Solved Threads: 12
Okay, so I'm parsing the map file, looping through the nodes, and adding an image based on the XML file:
"map" is blanked, then that code executes & adds those images.
I still see no reason for it to break.
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")); } }
"map" is blanked, then that code executes & adds those images.
I still see no reason for it to break.
![]() |
•
•
•
•
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
•
•
•
•
•
•
•
•
DaniWeb JavaScript / DHTML / AJAX Marketplace
Similar Threads
- breaking down a string with a delimiter (Java)
- blocking direct image access (Site Layout and Usability)
- Monitor makes pinging sound, image problems (Monitors, Displays and Video Cards)
- Breaking News In Sacramento! (Geeks' Lounge)
- How to fix an image outside the <body> tag? (HTML and CSS)
- Content Breaking thru Borders (JavaScript / DHTML / AJAX)
- breaking image into smaller bits (IT Technologies and Trends)
- A joke ... (Geeks' Lounge)
Other Threads in the JavaScript / DHTML / AJAX Forum
- Previous Thread: database connection possible????
- Next Thread: Function not returning value


Linear Mode