Vanilla 1 is no longer supported or maintained. If you need a copy, you can get it here.
HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.
Options

change css background with java?

edited November 2007 in Vanilla 1.0 Help
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>

Comments

  • Options
    Java = JavaScript NOT!
  • Options
    mmm k do you know how to do this?
  • Options
    Yes I do but I am away from my deveopment tools at the moment, maybe later when I get home.
  • Options
    k, thanks
  • Options
    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

  • Options
    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
  • Options
    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
  • Options
    edited November 2007
    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.
  • Options
    thanks i'll give it a go
  • Options
    edited November 2007
    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
  • Options
    edited November 2007
    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)';" />
This discussion has been closed.