Using ajax change header background image

[multichild]

I have a header and the background is set via the css as below

<header class="imageholder">
<div id="flag_Link"><a href="es/index.php" lang="es" hreflang="es"><img src="img/spain.png" width="50" height="33" alt="Spanish Flag" title="Spanish Translation"></a></div>
<div class="container" id="home">
<div class="row">
<div class="col-lg-12">
<div class="intro-text">
<h1><span class="name">A MODULAR APPROACH</span></h1>
<div style="position:relative; width:100%; height:30px; clear:both"></div>
</div>
</div>
</div>
</div>
</header>


header{background: url(../img/cc_top_image_4.jpg); -webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;}

I basically then have a series of images and on click of the image, I need the background image to change, so have made a start but not quite there with it.

<script type="text/javascript">
function changeImg(image){
var imghol = document.getElementById("imageHolder");
imghol.src = image;
}
</script>

<div class="team_pic"><a href="javascript:" onclick="changeImg('car.jpg');"><img src="img/module_Icons/Brand.png" width="137" height="137"  alt="BrandCheck"></a></div>

I also have a h1 tag in there and that needs to change too on each button click, so do I add that text into the onclick function in the href too?, im not sure

[multichild]

Maybe this is better, but its still not working -

<header>
<div id="flag_Link"><a href="es/index.php" lang="es" hreflang="es"><img src="img/spain.png" width="50" height="33" alt="Spanish Flag" title="Spanish Translation"></a></div>
<h1><span class="name">A MODULAR APPROACH</span></h1>
<div style="position:relative; width:100%; height:30px; clear:both"></div>
</header>

<style>
header{text-align:left;background:#000000; background: url(../img/cc_top_image_4.jpg); -webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;}
</style>

<div class="team_pic">
<a href="#" id="brand">
    <img src="img/module_Icons/Brand.png" width="137" height="137"  alt="BrandCheck">
</a>
</div>

<script>
$("#brand").click(function() { 
$('header').css({'background':'url(new_image.jpg)'});
$('header').h1("hello");
});
</script>

[multichild]

Sorted now thank you

[WebMachine]

I’m glad you figure it out. So what did you do to fix your problem, @multichild? It might be something that others would be interested in knowing also.

[multichild]

Sure, this is how I managed to get it working with -

<header>
<div class="container" id="home">
<div class="row">
<div class="col-lg-12">
<div class="intro-text">
<h1><span class="name">A MODULAR APPROACH</span></h1>
<p></p>
</div>
</div>
</div>
</div>
</header>

<style>    
header{text-align:left;background:#000000; background: url(../img/cc_top_image_4.jpg); -webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;}
</style>

<script>
function BRAND(){
$('header').css({'background':'url(../img/modules/Brand.jpg)'});
$('header h1 span').text("BrandCheck");
$('header .intro-text p').text("provides the tools and support necessary to create, develop, maintain or protect the business brand standards.");
};
</script>

<a href="#" onclick="BRAND()"><img src="img/module_Icons/Brand.png" width="137" height="137" alt="BrandCheck"></a>

there we go, hopefully that helps someone out down the line