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 jQuery Basics (2014) Creating a Simple Lightbox Perform: Part 3

Kevin Dunn
Kevin Dunn
6,623 Points
Posted by Kevin Dunn
Kevin Dunn
6,623 Points

Very confused with this part of the code...

So i'm having a hard time trying to understand this part of the code:

  $image.attr("src", imageLocation);

what is the purpose of having "src" and imageLocation as parameters?

Thanks!

2 Answers

Steven Parker
Steven Parker
229,644 Points
Steven Parker
Steven Parker
229,644 Points

:point_right: The .attr() method lets you set the value of an element attribute.

In this case, the element is an image (<img>), so this code is setting the src attribute. The variable imageLocation contains a string which identifies the specific image file to be displayed. Changing the src attribute effectively changes which image is being displayed.

Kevin Dunn
Kevin Dunn
6,623 Points
Kevin Dunn
Kevin Dunn
6,623 Points

Thanks for your reply, but im still a bit confused. Isnt href and src almost the same thing? providing a location of the file?

Zoltan Barath
Zoltan Barath
5,200 Points
Zoltan Barath
Zoltan Barath
5,200 Points

The <img> tag defines an image in an HTML page. The <img> tag has two required attributes: src and alt. There is no href attribute within an image tag. You use src to pont to an image-location.

In other words: In the image tag in html looks like this: <img src="" alt=""> and not like this: <img href="" alt=""> .