Question

I have a div with text and a separate div with a jpg image on a web page.

There are six (jpg) buttons in different areas on the web page.

When I select btn1.jpg, I would like text1.html and image1.jpg to load into the two div’s.

When I select btn2.jpg, I would like text2.html and image2.jpg to replace the content of the div.

When I select btn3.jpg, I would like to have text3.html and image3.jpg load into the div’s.

and so forth…

When one initially lands on the page, I would like to have the text and image associated with btn1.jpg loaded in the divs by default.

Answer 1

I’ve created this jsFiddle http://jsfiddle.net/davew9999/gFHnh/ that should do what you want. I’ve just done 2 buttons with 2 sets of text and images but you can just add more html buttons, the JavaScript will deal with as many buttons as you like.

Note that no text loads as text1.html and text2.html doesn’t exist for me but should work for you. Also I’ve used some example images from the web just to show it works.

HTML

<button id="button1" class="textImageChanger" data-image="http://www.transformerhair.com/wp-content/uploads/2010/11/test.jpg" data-html="text1.html">Button1</button>
<button class="textImageChanger" data-image="http://upload.wikimedia.org/wikipedia/commons/9/95/KWF_Test.png" data-html="text2.html">Button2</button>

<div id="textDiv"></div>
<div id="imageDiv"><img src=""/></div>

JavaScript

function LoadText(link) {
    $("#textDiv").load(link);
}

function LoadImage(image) {
    $("#imageDiv img").attr("src", image);
}


$(document).ready(function() {
    LoadText("text1.html");
    LoadImage($("#button1").data("image"));

    $(".textImageChanger").click(function() {
        LoadText($(this).data("html"));
        LoadImage($(this).data("image"));
    });
});

​