Question

This is my first time tackling this so please correct me if my terminology for this wrong.

I have a div box that’s going to be 500 in height and 500 in width, in it I will have text content when it’s first loaded. At the bottom I will have a button that says “click here.” When that button is clicked I want to change the background on the box and load images.

Please refer to the drawing below:

Answer 1

I’d personally take a different more straight-forward approach. That is, if all you need is a few images you might as well fetch them in advance and hide them, skipping unnecessary server requests:

Working fiddle

CODE:

HTML:

<div id="container">
    <div id="button_layer">
        <p>Some Text</p>
        <button>Click Me</button>
    </div>
    <div id="images_layer">
        <img src="http://mattat.org.il/wp-content/themes/matat/img/aminadav.jpg"/>
        <img src="http://mattat.org.il/wp-content/themes/matat/img/aminadav.jpg"/>
         <img src="http://mattat.org.il/wp-content/themes/matat/img/aminadav.jpg"/>
    </div>
   </div>

​ CSS:

#container {
width:500px;
height:500px;
background:grey;
}
#images_layer {
display:none;
}

JS:

 $(document).ready(function(){
    $("button").click(function(){
         $("#button_layer").hide();
        $("#images_layer").show();
        $("#container").css("background","yellow");
    })
  });

​