change image inside a div — image ID array

Question

How to change the image on the div when input image is clicked.
I tried this but nothing is working .. ?

control is not even entering the the if/else portion of each() loop.

My div is having a ID do i need ID for each image inside every div to change the image or ID of DIV is more than enough to change the image inside the div ?

javascript & Jquery code :--

var div_class_scrollable_Image = [
"Groung-Floor-Image" , "Floor-1-Image", "Floor-2-Image", "Floor-3-Image"
];

function show_area( parameter_image_array, parameter_image)
{

  // set img src

  // $("." + parameter_image_array[2]).attr('src', 'https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRXWRtwgI9heLVdQJhRcozi2XV3q5m2RTZwdrTuRGTcFfM708xyBQ');

  //$('.Floor-3 img').attr('src', 'https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRXWRtwgI9heLVdQJhRcozi2XV3q5m2RTZwdrTuRGTcFfM708xyBQ');

  $(parameter_image_array).each(function(index, element) {
        if(element != parameter_image )
        {
          $(element).attr('src', 'http://ipadwisdom.com/wp-content/uploads/2014/02/NestThermostatAppIcon.png');

        }
        else
        {
          $(element).attr('src', 'https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRXWRtwgI9heLVdQJhRcozi2XV3q5m2RTZwdrTuRGTcFfM708xyBQ');
        }
       //alert("hellooooo");
    });


}



Html code :---    
    <div id="images" class="scrollable">
        <div id="Groung-Floor" class="input">
            <input id="Groung-Floor-Image" type="image" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRXWRtwgI9heLVdQJhRcozi2XV3q5m2RTZwdrTuRGTcFfM708xyBQ" onclick="show_area( 'div_class_scrollable_Image', 'Groung-Floor-Image' )"  />
            <p >Groung-Floor</p>
            <hr>
        </div>
        <div id="Floor-1" class="input">
            <input id="Floor-1-Image" type="image" src="http://ipadwisdom.com/wp-content/uploads/2014/02/NestThermostatAppIcon.png" onclick="show_area('div_class_scrollable_Image', 'Floor-1-Image')"  />
            <p >1-Floor</p>
            <hr>
        </div>
        <div id="Floor-2" class="input">
            <input id="Floor-2-Image" type="image" src="http://ipadwisdom.com/wp-content/uploads/2014/02/NestThermostatAppIcon.png"  onclick="show_area( 'div_class_scrollable_Image', 'Floor-2-Image')"  />
            <p >2-Floor</p>
            <hr>
        </div>
        <div id="Floor-3" class="input">
            <input id="Floor-3-Image" type="image" src="http://ipadwisdom.com/wp-content/uploads/2014/02/NestThermostatAppIcon.png" onclick="show_area( 'div_class_scrollable_Image', 'Floor-2-Image', )"  />  
            <p >3-Floor</p>
            <hr>              
        </div>

    </div>

Please suggest

Answer 1

I'm sorry but your code is almost unreadable and... ugly ;-) I'll give you this code as an hint to improve yours:

HTML

<div>
    <input type="image" src="foo.jpg" data-alt-src="bar.jpg" class="swap" />
</div>

JavaScript

$(".swap").click(function () {
    $(".swap").each(function () {
        var alt = $(this).data("alt-src");
        $(this).attr("src", alt);
    });    
    //do other work if needed...
});

As you can see I use the data- attribute to set an alternate image directly in the HTML tag, then I read it on click event and I replace the current src with the alternate image.

Answer 2

您也可以为Div使用background-image:url("/path/image") ，然后像document.getElementById(DivId).style.backgroundImage = "/path/new_image"一样更改它，请参见http：//www.w3schools .com / css / css_background.asp

Answer 3

Thanks batu Zet or correcting array issue.

this link answered my question ...
Programmatically change the src of an img tag

This worked :--

$(parameter_image_array[2]).attr('src', 'https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRXWRtwgI9heLVdQJhRcozi2XV3q5m2RTZwdrTuRGTcFfM708xyBQ');

This also worked :---

  $(parameter_image_array).each(function(index, element) {
        if(element != parameter_image )
        {
          $("#" +element).attr('src', 'http://ipadwisdom.com/wp-content/uploads/2014/02/NestThermostatAppIcon.png');

        }
        else
        {
          $("#" + element).attr('src', 'https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRXWRtwgI9heLVdQJhRcozi2XV3q5m2RTZwdrTuRGTcFfM708xyBQ');
        }

    });