Changing the Image Source Using Jquery

Jquery - change img src on click and return old src if clicked on different img or block

I'd suggest you use the $('object').data() method to store the values in the images.

This way you store the values in the objects themselves, and you can easely swap in and out information.

$('img').on('click',function() {

  var tradeoff = 'http://firestarter.firebrandgroup.com/images/flame-logo.gif?b20388';

  /** Reset images to original image **/

  $('img').each(function() {

    var $img = $(this);

    /** get the old original src **/

    var data = $img.data('oldsrc');

    /** only update if there is actually some value there **/

    if(data) {

      $img.attr('src',data);

      }

      

  });

  

  /** current image **/

  var $this = $(this);

  /** current href **/

  var src = $this.attr('src');

  

  /** only store if different from tradeoff value **/

  if(src != tradeoff) {

    /** store in image the old data **/

    $this.data('oldsrc',src);

  }

  /** show the tradeoff **/

  $this.attr('src',tradeoff);

});

img { width:100px;height:60px;}

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

<img src="https://i.ytimg.com/vi/RTfvXkEXa-k/maxresdefault.jpg"><BR/>

<img src="https://i.ytimg.com/vi/XlUPuj2V6PM/maxresdefault.jpg"><BR/>

<img src="https://i.ytimg.com/vi/Haj9TAFCv5w/maxresdefault.jpg"><BR/>

jquery changing image src

Demo: http://jsfiddle.net/235ap/

You won't see the image changing in the demo but if you look at the inspector, it's changing.

HTML

<ul class="nav">
    <li class="header">Quick Access:</li>
    <li>        
        <a id="itemLink" href="#">Add Item</a>
        <img id="Mitemimg" class="qaimg" src="images/icon_trace.gif">
    </li>
    <li>
        <a id="adminLink" href="#">Add Administrator</a>
        <img id="menuIMG" class="qaimg" src="images/icon_trace.gif">
    </li>
</ul>
<div id="main">
     <h1>Actions Required:</h1>

    <div id="forms">
        <table id="addItem" class="linkForm" style="display: none;">
            <tr>
                <td>addItemTable</td>
            </tr>
        </table>
        <table id="addAdmin" class="linkForm" style="display: none;">
            <tr>
                <td>addAdminTable</td>
            </tr>
        </table>
    </div>
</div>

JS

$(document).ready(function () {
    $('#adminLink').click(function(event) {
        event.preventDefault();
        change('#menuIMG', '#addAdmin');
    });

    $('#itemLink').click(function(event) {
        event.preventDefault();
        change('#Mitemimg', '#addItem');
    });

});

function change(imgId, divId) {
    // reset img src
    $('.qaimg').attr('src', 'images/icon_trace.gif');

    // set img src
    $(imgId).attr('src', 'images/icon_sync.gif');

    // slide up all
    $('#forms .linkForm').slideUp('slow', function() {
        // slide down div
        $(divId).slideDown('slow', function() {});
    });
}

in above function change, when the link is selected for the second time. In stead of sliding up, it slides up and then back down. Below is the same function with changes made for it to work properly.

  function change(imgId, divId) {
      //check to see if div is visable
      var vis = ($(divId).css('display') == 'none')? false:true;

      // slide up all
      $('#forms .linkForm').slideUp('slow', function() { });
      // reset img src
      $('.qaimg').attr('src', 'images/icon_trace.gif');

     // if div isn't visable
    if(!vis){
        // slide down div
       $(imgId).attr('src', 'images/icon_sync.gif');
       // set img src
       $(divId).slideDown('slow', function() {});
    }
 }

Change image src with jquery

id of your img tag is status, so it should be:

$('#status').attr("src", '/Content/img/disable.png');

JQuery change the value of an img src= by ID

Using: $(function(){ ... });

You can use:

$('#id').attr('src', 'newImage.jpg');

to change the image source immediately.

---

Alternatively, you can use jQuery animations to change an image.

JS

$("#id1").fadeOut();
$("#id2").delay(200).fadeIn();

HTML

<div>
    <img id='id1' src='one.jpg'>
    <img id='id2' src='two.jpg'>
</div>

(Don't forget to change the CSS of #id2 and put display: none as initial state).

change image src in div using .attr() in jQuery

for doesn't set this, so $(this) refers to the global window object, not the current element of the iteration. Use .each:

links.each(function() {
    alert("DFDF");
    $(this).find("img").attr('src', 'images/back.jpg');
});

But you don't need to iterate at all, because jQuery modifier functions will operate on a collection:

links.find("img").attr('src', 'images/back.jpg');

change some text in src of image tag using jquery

You can simply get the src attribute of the images, loop it over and replace the _i with _4 using JQuery. To check the below snippet works, you need to use inspect element of the browser and check the src attribute.

$(document).ready(function(){

  $('img').each(function(){

    var src = $(this).attr('src');;

    $(this).attr('src', src.replace('_i','_4'));

  });

});

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

<img src="/media/image_4/ball.png">

<img src="/media/image_4/bat.png">

changing img src of another div with jquery?

You have wrong selector - your selector is to div, not to img. This should be $('#projImage img').attr('src',url_img)

Changing an image src attribute with jQuery not always applied in Chrome/Opera

Looks like your issue is well-documented as is evident from the following posts:

1. jquery callback on image load when changing the src

2. Capturing load event for images dynamically changing their source

3. jQuery callback on image load (even when the image is cached)

I would suggest you load a new image into memory, then when this new image's load event fires, change the src of the actual image and do whatever else needs to be done. The original image remains intact and any other events (other than load) attached to it should remain intact:

$(new Image()).attr('src', '/photos/original-snippet.php?id=<?php echo $nID?>&x=' + left + '&y=' + top).load(function() {
    $('#magviewplus').attr('src', this.src);
    window.clearInterval(maginterval);
    magtimer = 3;
    maginterval = window.setInterval(magViewCountdown,1000);
    $('#clicktoenhance').html('Exiting in ' + magtimer + 's...');
});

DEMO

---

Related Topics