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
dylan kane
2,772 PointsUse a javascript string that is an image path for css background attribute.
I have a javascript value for an image path because the path will constantly be changing, but now I need to put this value into my css. Any idea on how i can do that?
dylan kane
2,772 PointsJason, are those not the same thing?
dylan kane
2,772 PointsI mean css background and html background
Jason Anello
Courses Plus Student 94,610 PointsIn general, if your images are considered part of the content of the site then they should go in the html.
Example:
<img src="path/to/image">
But if they are there for purely visual reasons as part of the design then they should be applied as background images in the css.
Example:
div {
background: url('path/to/image');
}
You'll have to decide which is appropriate for your images. The js will depend on which situation it is.
Patrick gave an answer along the lines of it being in the html and Sergey gave an answer based on them being css background images.
dylan kane
2,772 PointsAlright thank jason, ill go with sergery!
Jason Anello
Courses Plus Student 94,610 PointsYou're welcome.
Do you have enough to go off of with Sergey's answer or do you need more details?
2 Answers
Sergey Podgornyy
20,660 PointsTo change the style of an HTML element, use this syntax:
document.getElementById(id).style.property=new style
dylan kane
2,772 Pointsmy problem is though, that I have to put a variable that stores the path as a string into the src area. Is that possible?
Sergey Podgornyy
20,660 PointsYou can use jQuery's attr() function. For example, if you img tag has an id attribute of 'my_image':
<img id="my_image" src="first.jpg"/>
Then you can change the URL of an image:
document.getElementById("myImg").src = "hackanm.gif";
Or you can change the src in jQuery by:
$("#my_image").attr("src","second.jpg");
To attach this to an onclick event, you could write:
$('#my_image').on({
'click': function(){
$('#my_image').attr('src','second.jpg');
}
});
To rotate the image, you could do this:
$('img').on({
'click': function() {
var src = ($(this).attr('src') === 'img1_on.jpg')
? 'img2_on.jpg'
: 'img1_on.jpg';
$(this).attr('src', src);
}
});
Sergey Podgornyy
20,660 PointsReturn the URL of an image:
var x = document.getElementById("myImg").src;
The result of x will be: http://www.w3schools.com/jsref/compman.gif
patrickgardner
7,395 PointsDo you need to have the image in your CSS? If not, you could use a placeholder image in your CSS (or no image - just modify the DOM via javascript), and have the javascript add the image when you know the location.
e.g:
document.getElementById("youridhere").src="new/image/location.png";
dylan kane
2,772 Pointsmy problem is though, that I have to put a variable that stores the path as a string into the src area. Is that possible?
Jason Anello
Courses Plus Student 94,610 PointsJason Anello
Courses Plus Student 94,610 PointsHi Dylan,
Can you clarify whether this needs to be a css background image or an image in the html using the
imgelement?The answers you have here are assuming different scenarios so it would be helpful to clarify.
And are you coding in plain javascript or using jQuery?