legolas Posted November 20, 2007 Share Posted November 20, 2007 I need to position an image in my document on-the-fly at a specific location and I've tried the following piece of code...var marker = document.createElement('div');var cssString = 'background-image:url (pics/dot.gif);position:absolute;top:250px;left:200px;';if (typeof(marker.style.cssText) == 'string') { marker.style.cssText = cssString;}marker.setAttribute('style',cssString);body[0].appendChild(marker);after reading http://www.howtocreate.co.uk/tutorials/jav.../domstylesheets...but the image doesn't show up at all.Can anyone see what I'm doing wrong or what's missing? Link to comment Share on other sites More sharing options...
Ingolme Posted November 20, 2007 Share Posted November 20, 2007 I don't reallyn trust the CSS text because I've never used it. I'd do it this way:var marker = document.createElement('div');marker.style.backgroundImage = 'url (pics/dot.gif)';marker.style.position = 'absolute';marker.style.top = '250px';marker.style.left ='200px';document.body.appendChild(marker);Oh, and if you don't see anything it's because the <div> tag doesn't have any height because there's nothing inside it.You can give it a height:marker.style.height = "200px"; Link to comment Share on other sites More sharing options...
legolas Posted November 20, 2007 Author Share Posted November 20, 2007 Yeah, that was better although I had to add a width property as well. Then I defined the size of the div tag equal to the size of my gif image.The code that now displays the image correctly:var marker = document.createElement('div');marker.style.backgroundImage = 'url(pics/dot.gif)';marker.style.position = 'absolute';marker.style.top = '250px';marker.style.left ='200px';marker.style.height = '10px';marker.style.width = '10px';document.body.appendChild(marker);Thanks for your advice! Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.