Toggling between two image sources

Question

I want to toggle between two images one is "edit.png" and another "ok.png", when page loads it should shows "edit.png" and when we click on edit.png it should changes to ok.png. i have tried with the following java script code, but this code is applying only to the first edit.png image in my table it is not applying to next edit.png image. Anyone suggest how can i apply this java script code to every edit.png image in my table. For table i used the "tabledit" plugin. screen shot my web page

var toggle = false;
function changing() {
    if (toggle === true) {
        document.getElementById('edit').src  = '/concrete5/application/images/animated/btn_edit.png';
    } else {
       document.getElementById('edit').src = '/concrete5/application/images/animated/btn_ok.png';
 
    }
    toggle = !toggle; 
}

<img src="/concrete5/application/images/animated/btn_edit.png" id="edit" onclick="changing()"/>

Reason it loads only one is because src just loads the image on page load/refresh. After the initial loading, you should use another way of loading the image like AJAX. — Leonel Atencio, Jan 07 '17 at 15:09
Or you can also load both of them on a hidden div, and toggle (show/hide) them as needed. — Leonel Atencio, Jan 07 '17 at 15:10

score 1 · Answer 1 · edited May 23 '17 at 11:46

I would personally display both images, and toggle the visibility instead of the url:

var toggle = true;
function changing() {
  document.getElementById('edit').style.display = toggle ? 'none' : 'block';
  document.getElementById('ok').style.display = toggle ? 'block' : 'none';
  toggle = !toggle; 
}

<img src="http://placehold.it/300x300" onclick="changing()" id="edit"/>
<img src="http://placehold.it/200x200" onclick="changing()" id="ok" style="display:none">

But if you really want it, you can load the image using Ajax. That will involve a lot more work. I would use the jquery implementation of ajax in that case.

There is an ajax answer here.

-here i am adding images through " tabledit" plugin in javascript file hence again it is applying to first images only. please clarify. — Praveenkumar Beedanal, Jan 08 '17 at 19:58

Leonel Atencio · Answer 2 · 2017-01-07T15:19:17.757

0

Easiest way is to load both images, and toggle the display=none style property with Jquery .toggle().

function changing() {
  $('#edit').toggle();
  $('#ok').toggle();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<img src="http://placehold.it/300x300" id="edit" onclick="changing()"/>
<img style="display:none;" src="http://placehold.it/200x200" id="ok" onclick="changing()"/>

edited Jan 07 '17 at 15:19

answered Jan 07 '17 at 15:15

Leonel Atencio

474
3
14

JQuery isn't part of the original question and unnecessary – Randy Jan 07 '17 at 15:17
If the OP does not want to use Jquery, then it can use your answer. I'm just giving him possibilities. – Leonel Atencio Jan 07 '17 at 15:18

richardgirges · Answer 3 · 2017-01-07T15:28:34.733

The reason your function is only updating the first image in your table is because getElementById('edit') is targeting the first image on the DOM with id='edit'.

IDs are meant to be unique, and so each of your images should have a unique ID.

One approach would be to make your changing() function take in a parameter for imageId:

var toggle = false;
function changing(imageId) {
    if (toggle === true) {
        document.getElementById(imageId).src  = '/concrete5/application/images/animated/btn_edit.png';
    } else {
       document.getElementById(imageId).src = '/concrete5/application/images/animated/btn_ok.png';

    }
    toggle = !toggle; 
}

And pass the imageId parameter in from your <img> tag:

<img src="/concrete5/application/images/animated/btn_edit.png" id="edit-row-1" onclick="changing('edit-row-1')"/>

Remember you'll have to ensure every image tag contains it's own unique ID. So your images on every row would look something along the lines of this:

<!-- row 1 -->
<img src="/concrete5/application/images/animated/btn_edit.png" id="edit-row-1" onclick="changing('edit-row-1')"/>

<!-- row 2 -->
<img src="/concrete5/application/images/animated/btn_edit.png" id="edit-row-2" onclick="changing('edit-row-2')"/>

<!-- row 3 -->
<img src="/concrete5/application/images/animated/btn_edit.png" id="edit-row-3" onclick="changing('edit-row-3')"/>

Your IDs in the `` tag could be dynamically defined as well. What method are you using to dynamically add your rows? — richardgirges, Jan 08 '17 at 22:26

Toggling between two image sources

3 Answers3