Changing the background to a picture based on an value selection [duplicate]

Answer 1

Demo: http://jsfiddle.net/Qwnm6/

<label for="pictype">Select a New Background</label>
<select id="pictype" name="pictype" onchange="document.body.style.background = this.value">
    <option value="red">pic1</option>
    <option value="green">pic2</option>
    <option value="blue">pic3</option>
    <option value="yellow">pic4</option>
    <option value="lime">pic5</option>
    <option value="gray">pic6</option>
</select>

Answer 2

here is the code:

    $( "#pictype" ).change(function(){

        if( this.value == "p1" ) //here goes code to change picture
        if( this.value == "p2" ) //here goes code to change picture
        ......

    });

Answer 3

Try this. NOTE: I deleted your onclick function calling pictype

HTML

    <select id="pictype" name="pictype">
        <option value="p1">pic1</option>
        <option value="p2">pic2</option>
        <option value="p3">pic3</option>
        <option value="p4">pic4</option>
        <option value="p5">pic5</option>
        <option value="p6">pic6</option>
    </select>

JavaScript

var selectEl = document.getElementById("pictype");

selectEl.onclick = function () {

    if (this.value == "p1") {
        document.body.style.backgroundColor = "Black";
    }
    else {
        document.body.style.backgroundColor = "White";
    }
}

Answer 4

You can use a .change event, and smart file naming to achieve this result. Using jQuery is by far the easiest solution.

If you name your images the same as the option values, you can then reference images based off of the current option selected. So for the first option you could name the picture, p1.jpg.

<label for="pictype">Select a New Background</label>
    <select id="pictype" name="pictype">
    <option value="p1">pic1</option>
    <option value="p2">pic2</option>
    <option value="p3">pic3</option>
    <option value="p4">pic4</option>
    <option value="p5">pic5</option>
    <option value="p6">pic6</option>
    </select>

jQuery

 $("#pictype").change(function(){
    var imageFileName = $(this).val();
    $("body").css("background-image", "url(../Images/"+imageFileName+".jpg)");    
});

So if you selected option #1, it would set the background image url to url("../Images/p1.jpg");

Here is the jsfiddle: http://jsfiddle.net/mtruty/3L2uP/ Hope this helps!