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

Where do you set parameter_image_array variable? Make a JSFiddle. — JF it, Apr 15 '14 at 09:29
Your `function show_area()` expects 2 parameters but youre sending 3 parameters in your elements' `onclick` events. — Batu.Khan, Apr 15 '14 at 09:31
Man. In `onclick` functions youre sending your `array` as a `string` `'div_class_scrollable_Image'`. Remove the `'`s — Batu.Khan, Apr 15 '14 at 10:01
thanks it was mistake .. now each() loop is working .. but still i am not able to change the image using the image ID.... is this format to change the image is wrong... ? — Katoch, Apr 15 '14 at 10:17

Darko Romanov · Answer 1 · 2014-04-15T09:58:31.390

0

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.

edited Apr 15 '14 at 09:58

answered Apr 15 '14 at 09:28

Darko Romanov

2,776
2
31
38

I have edited my code .. Actually when the button is pressed i need to do some work & also change the image of the selected input source & also the other images... thats why i am using array to save the ID of other images. .. this is not what i want to achieve. – Katoch Apr 15 '14 at 09:42
As I explained, this is an hint. If you want to change all the images then just use the "each()", look edited code. – Darko Romanov Apr 15 '14 at 09:58

score 0 · Answer 2 · answered Apr 15 '14 at 09:42

0

You also may use background-image:url("/path/image") for Div and later change it like document.getElementById(DivId).style.backgroundImage = "/path/new_image" See to http://www.w3schools.com/css/css_background.asp

answered Apr 15 '14 at 09:42

Don Lino

116
9

but their is also a paragraph & horizontal line in an div. – Katoch Apr 15 '14 at 09:50

score 0 · Answer 3 · edited May 23 '17 at 12:27

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');
        }

    });

change image inside a div -- image ID array

3 Answers3