ev5unleash Posted April 18, 2009 Share Posted April 18, 2009 Hey Everyone, I'm trying to create a button that will change a bunch of images to something else. (Example. There are two layers, I want to change the 1st layer's background image to the 2nd layers, and the 2nd layers background image to the 1st layer's using the onClick event.) http://ev5unleash.dnsalias.org:1212/imagechange.html Thanks Quote Link to comment Share on other sites More sharing options...
.josh Posted April 18, 2009 Share Posted April 18, 2009 <script language="Javascript"> function swapBgImages() { var div1 = document.getElementById('apDiv1'); var div2 = document.getElementById('apDiv2'); // true: IE false: FF var temp = (div1.currentStyle)? div2.currentStyle.backgroundImage : getComputedStyle(div2,'').getPropertyValue('background-image'); div2.style.backgroundImage = (div1.currentStyle)? div1.currentStyle.backgroundImage : getComputedStyle(div1,'').getPropertyValue('background-image'); div1.style.backgroundImage = temp; } </script> Quote Link to comment Share on other sites More sharing options...
ev5unleash Posted April 18, 2009 Author Share Posted April 18, 2009 You don't understand, I don't want the JavaScript literally to swap the images. I want one the button click to change then to the selected location so I can implement this in another thing with layers. I want to use this so I can make a theme system. Quote Link to comment Share on other sites More sharing options...
.josh Posted April 18, 2009 Share Posted April 18, 2009 You don't understand, I don't want the JavaScript literally to swap the images. I understood your OP perfectly fine. There are two layers, I want to change the 1st layer's background image to the 2nd layers, and the 2nd layers background image to the 1st layer's using the onClick event If you call that function in your button's onclick, the background images for your two layers will swapped. That's what you asked for, that's what you got. If you wanted something else then you should have asked for something else. I want one the button click to change then to the selected location so I can implement this in another thing with layers. I want to use this so I can make a theme system. Be more specific. Give an example. Draw a picture if you have to. Quote Link to comment Share on other sites More sharing options...
ev5unleash Posted April 18, 2009 Author Share Posted April 18, 2009 Sorry about the confusion, I want to have the both layers pictures changed to the others. Like Layer1's background changed to bg2.png and Layer2's background changed to bg1.png on click. I don't want the images swapped so much, I want the images changed to something else on button click. Quote Link to comment Share on other sites More sharing options...
ev5unleash Posted April 18, 2009 Author Share Posted April 18, 2009 Here's an example of what I"m trying to do. I need the onClick code to be modified so that it actually works. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style type="text/css"> <!-- #apDiv1 { position:absolute; width:300px; height:145px; z-index:1; left: 239px; top: 40px; background-image: url(/websites/sbsolution/systemfiles/images/accesspanel.png); } #apDiv2 { position:absolute; width:300px; height:145px; z-index:2; left: 578px; top: 44px; background-image: url(/websites/sbsolution/systemfiles/images/accesspanelred.png); } --> </style> </head> <body> <div id="apDiv1">Layer 1</div> <div id="apDiv2">Layer 2</div> <input name="change" type="button" id="change" onclick="document.getElementById(apDiv1).style.backgroundImage = url(websites/sbsolution/systemfiles/images/accesspanelred.png);" value="changeimages" /> </body> </html> Quote Link to comment Share on other sites More sharing options...
.josh Posted April 18, 2009 Share Posted April 18, 2009 okay well you're still being kind of ambiguous...but here's what the onclick should look like for what you posted... <input name="change" type="button" id="change" onclick="document.getElementById('apDiv1').style.backgroundImage = 'url(/websites/sbsolution/systemfiles/images/accesspanelred.png)';" value="changeimages" /> Quote Link to comment Share on other sites More sharing options...
ev5unleash Posted April 18, 2009 Author Share Posted April 18, 2009 Thank you, this worked perfectly. Quote Link to comment Share on other sites More sharing options...
darkfreaks Posted April 18, 2009 Share Posted April 18, 2009 please mark topic as solved thanks 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.