Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by troy beckett
troy beckett
12,035 Points

manipulating img src

Say I had an image with src:

src="img/dotted.jpg"

Then I had a large version of the image with the src:

src="img/dotted_large.jpg"

How could I change the src of the first image to the second on on click so for example:

$("img").click(function() {
//capture click image src
var imageLocation = $(this).attr('src');
//Now I want to add _large to the src I captured

});

Is this possible and what are the methods you would advise using.

1 Answer

Zoltán Holik
Zoltán Holik
3,401 Points
Zoltán Holik
Zoltán Holik
3,401 Points 
<a class="large" href="images/dotted_large.jpg"><img src="dotted.jpg" alt="dotted"/></a>

$(".large").click(function(e) {
    e.preventDefault();

    var largePic = $(this).attr('href');

    $(this).find('img').attr('src', largePic);
});
troy beckett
troy beckett
12,035 Points

Thanks for your help, this is the method treehouse teach but unfortunately I can't use that method as its all part of an image gallery that does many different things. For mine to work what I need is a method where you can take the src and add _large to the end.

thanks for helping

Zoltán Holik
Zoltán Holik
3,401 Points

and if you use data attributes? or with substr() method you can cut the extension at the end of the src, and add the "_large" string at the end with a new or the same extension(jpg,png...etc)