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

replace none with the filename – Mahesh KP Jul 04 '11 at 07:22 — Mahesh KP, Jul 04 '11 at 07:22

Niklas · Accepted Answer · 2015-06-15T22:03:03.457

17

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

edited Jun 15 '15 at 22:03

answered Jul 04 '11 at 07:23

Niklas

29,752
5
50
71

thanks.. i took the .attr() and replaced the second .prop() and it worked perfectly.. – gavsiu Jul 04 '11 at 07:28
1

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 http://stackoverflow.com/questions/5874652/prop-vs-attr, T.J Crowder's explanation). jQuery changed again in 1.6.1 (http://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. – mhenry1384 Feb 28 '12 at 16:29
3

@mhenry1384 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 (http://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.' – Niklas Feb 28 '12 at 19:21
+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. – goodeye May 23 '13 at 16:01
Regarding "_Note that prop is used to assign boolean properties_" Not sure if it was ever true but not anymore. – coviex Jun 15 '15 at 19:16
@coviex I've removed the comment – Niklas Jun 15 '15 at 22:03

score 6 · Answer 2 · answered Jul 04 '11 at 07:21

6

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

answered Jul 04 '11 at 07:21

Muhammad Adeel Zahid

17,474
14
90
155

Roko C. Buljan · Answer 3 · 2013-08-06T09:43:03.777

3

DEMO

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

edited Aug 06 '13 at 09:43

answered Jul 04 '11 at 07:36

Roko C. Buljan

196,159
39
305
313

But when you move mouse away the source stays reaplaced, what should i do to swap back the source to starting position? – Jul 15 '16 at 10:47

score 1 · Answer 4 · answered Jul 04 '11 at 07:21

1

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

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

answered Jul 04 '11 at 07:21

Alex Pliutau

21,392
27
113
143

score 1 · Answer 5 · answered Jul 04 '11 at 07:22

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

});

score 0 · Answer 6 · answered Jul 04 '11 at 07:22

0

How about using attr:

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

answered Jul 04 '11 at 07:22

Kamyar

18,639
9
97
171

score 0 · Answer 7 · answered Jul 04 '11 at 07:26

0

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

answered Jul 04 '11 at 07:26

hungryMind

6,931
4
29
45

changing the img src with jquery

7 Answers7

DEMO

Linked

Related