change css background with java?

silent1643

I have seen javascript to where if you select "red" or "blue" the background will change to that but can you use this to link to a header element? and use for images? on click change header background to pattern2.gif and so on the basic java that i have seen is below <form> <input type="button" value="White" onClick="document.bgColor = '#FFFFFF';"> <input type="button" value="Green" onClick="document.bgColor = '#008000';"> <input type="button" value="Blue" onClick="document.bgColor = '#0000FF';"> <input type="button" value="Red" onClick="document.bgColor = '#FF0000';"> </form>

Wanderer

Java = JavaScript NOT!

silent1643

mmm k do you know how to do this?

Wanderer

Yes I do but I am away from my deveopment tools at the moment, maybe later when I get home.

silent1643

k, thanks

Wanderer

Your script works OK, now you need to create an extension to implement it.

Writing extensions is not too difficult if you have the aptitude but it can be time consuming and a steep learning curve.

Perhaps you could take a look at the excellent Nuggets to see if it does what you want.

Posted: Thursday, 8 November 2007 at 6:53PM

silent1643

bah its not my script i was just giving an example.. i just wanted to know if anybody knew how to do it or if it was already out there. I couldn't find anything that ccould change a css element

silent1643

here is another example - but it still uses document background - i want this same effect but i want it to change the #header css background only and not the whole page http://www.codebelly.com/javascript/backimagechange.html

SteVader

document.getElementById('header').style.background = whateveryournewvalueis
Where 'header' is whatever the id of the element your trying to change the style of is. background is the style that your trying to change (i.e. could just as easily be any style: margin;border;src etc.) and whateveryournewvalueis is well... what ever your new value for that style is. That can be done in a JavaScript function, onClick of an element, onLoad of the document etc.

silent1643

thanks i'll give it a go

silent1643

here is what i came up with <form> <input type="button" value="Image 2" onClick="document.getElementById('header').style.background = 'image2.gif';" /> </form> but nothing happens... trying to use this on the blogger theme, and i put the code in the head.php file

SteVader

Sorry... my bad. Try this:

<div id="header" style="background-image:url(http://i4.tinypic.com/819ve9x.gif);width:100px;height:100px;"></div> <input type="button" value="image 1" onClick="document.getElementById('header').style.background='url(http://i17.tinypic.com/7yn213s.png)';" /> <input type="button" value="image 2" onClick="document.getElementById('header').style.background='url(http://i4.tinypic.com/819ve9x.gif)';" />