R_P Posted July 7, 2009 Share Posted July 7, 2009 Fellow Gurus, I am looking for a way to change the paths of background images using Javascript. I am aware of document.images as a data structure to access images, but does there exist the equivalent for background images? These to do not seem to be included in said data structure. If not, does anyone have some good code to change the paths of background images post rendered without doing them one-by-one? Ryan Quote Link to comment Share on other sites More sharing options...
rhodesa Posted July 7, 2009 Share Posted July 7, 2009 document.getElementById('div_id').style.backgroundImage = "url(images/new_image.jpg)"; Quote Link to comment Share on other sites More sharing options...
R_P Posted July 7, 2009 Author Share Posted July 7, 2009 Thanks Aaron. Unfortunately, that is still the one-by-one method I am trying to avoid. I'm looking for something like this: for(var i=0; i < document.images.length; i++) { document.images[i].src="something new"; } Unfortunately, that only works with img tags within the document. I'm looking for a similar way to wash over all the background images at once - including those specified in external css files - and avoid using document.all... Quote Link to comment Share on other sites More sharing options...
rhodesa Posted July 8, 2009 Share Posted July 8, 2009 um...don't think that is going to be possible, especially with external CSS files. the only way i can see it working is if all the elements had the style specified inline what are you trying to accomplish with this? Quote Link to comment Share on other sites More sharing options...
meomike2000 Posted July 8, 2009 Share Posted July 8, 2009 try something like this maybe. not sure if this will work for you or not. but that is a modified version of how i assign my back ground image, only with a for loop. you may want to add a delay in there somehow or it will go very fast..... not sure if you will need the index counter or not. you could us i for that but i always get an extra what ever it is i am trying to assign at the end of the loop, only the img would be null.......??????????? hope this helps, mike...... var index = 1; for(var i=0; i < document.images.length; i++) { var img = null; img = document.images[index]; var self = bckgrnd; var body = document.getElementById('body'); body.background = img; index++; } Quote Link to comment Share on other sites More sharing options...
R_P Posted July 8, 2009 Author Share Posted July 8, 2009 Alright. I think I figured it out. The purpose of this is to change the look of the page with the click of a button by changing the path/address of all the images simultaneously. I figured it out though (luckily all my background images were in divs): var allDivs = document.getElementsByTagName("div"); for(var j=0; j<allDivs.length; j++){ if(allDivs[j].style.backgroundImage!="") allDivs[j].style.backgroundImage = allDivs[j].style.backgroundImage.replace(/path#/,"graphx/images/"); } In the future, "graphx/images/" will be a variable, pointing to the folders with similar named (but different) images. Thanks for the ping backs. Quote Link to comment Share on other sites More sharing options...
rhodesa Posted July 8, 2009 Share Posted July 8, 2009 there is a MUCH easier way to do this....in your CSS, specify it like so: .theme1 #someDiv { background: url(images/theme1/image1.jpg); } .theme2 #someDiv { background: url(images/theme2/image1.jpg); } then, in your body tag, you can specify a theme: <body class="theme1"> finally, with the JS you can change it: document.body.className = 'theme2'; Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.