changing the img src with jquery

Question

The html structure I have is something like:

<ul id="something">
  <li>
    <a href="">
      <img src="http://domain.com/directory/file1-128x79.jpg">
    </a>
  </li>
  <li>
    <a href="">
      <img src="http://domain.com/directory/file2-128x79.jpg">
    </a>
  </li>
  <li>
    <a href="">
      <img src="http://domain.com/directory/file3-128x79.jpg">
    </a>
  </li>
</ul>

I'm trying to change the filename from file#-128x79.jpg to file#-896x277.jpg.

I don't know how to take the dynamically generated filename and search and replace for the src changes.

I found my way to replacing the whole src with 'none' to make sure I got it right so far, but I don't know how to do the rest.

$('#something').removeAttr('id').prop('class', 'some-class').find('img').prop('src', 'none');

Stimulate

replace none with the filename – Rescission

Answer 1

You can replace the src for each img by first selecting all the images with a selector and then using the attr callback to replace the contents:

$('#something img').attr('src',function(i,e){
    return e.replace("-128x79.jpg","-896x277.jpg");
})

Out

thanks.. i took the .attr() and replaced the second .prop() and it worked perfectly.. – Stimulate

Your statement that prop() is only used to assign boolean properties is incorrect. It's used to assign any DOM properties. src is an HTML attribute (see https://mcmap.net/q/40503/-prop-vs-attr, T.J Crowder's explanation). jQuery changed again in 1.6.1 (blog.jquery.com/2011/05/10/jquery-1-6-1-rc-1-released). Setting an img src using either prop() or attr() seems to work for me. Tested with jquery 1.6.1 and 1.7.1 on Chrome 17, IE 8/9 and Firefox 10. – Sweepstake

@Sweepstake Just like how you can get boolean properties with attr, you can get non-boolean properties with prop. If you'd read the link you referred to (blog.jquery.com/2011/05/10/jquery-1-6-1-rc-1-released), the preferred usage is defined as 'The .prop() method should be used for boolean attributes/properties and for properties which do not exist in html (such as window.location). All other attributes (ones you can see in the html) can and should continue to be manipulated with the .attr() method.' – Out

+1 for the distinction and reference to 1.6.1 docs with preferred usage. In your answer, the note that prop is used to assign boolean properties is clarified with your comment "... and for properties which do not exist...". Perhaps edit the answer to include that condition. – Belomancy

Regarding "Note that prop is used to assign boolean properties" Not sure if it was ever true but not anymore. – Alejandraalejandrina

@Alejandraalejandrina I've removed the comment – Out

Answer 2

you can assign an id to your image tag like

<img id ="pic" src="http://domain.com/directory/file3-128x79.jpg">

then in jquery use

$('#pic').attr('src', 'file#-896x277.jpg');

Diacid

Answer 3

DEMO

$('img').hover(function(){ // or any other method
    this.src = this.src.replace("128x79", "200x60");         
}); 

Wera

But when you move mouse away the source stays reaplaced, what should i do to swap back the source to starting position? – Dzungaria

Answer 4

You should add .children() before .find('img'):

$('#something').removeAttr('id').attr('class', 'some-class').children().find('img').attr('src', 'none');

Pinkham

Answer 5

Note : try the following here mouse over is just for the demo purpose only

$(function() {
    $("something li a img")
        .mouseover(function() { 
            var src = "over.gif";
            $(this).attr("src", src); // change the image source
        })

});

Empyrean

Answer 6

How about using attr:

this.removeAttr('id').prop('class', 'featured-images').find('img').attr({‘src’:'file#-896x277.jpg’});

Synonymize

Answer 7

$('#something img').attr('src',$('#something img').attr('src').replace(x,y))

Sememe