Develop Reference

How to get a the url of an image from id in Javascript

I know it's such a beginner thing. So I have this image in a div with the id thumb.
<img id="thumb" src="https://url-to-a-image">
And this Javascript that it's a magnify script:
<script type="text/javascript">
var myImgSrc = document.getElementById("thumb").getElementsByTagName("img")
[0].src;
var evt = new Event(),
m = new Magnifier(evt);
m.attach({
thumb: '#thumb',
large: 'myImgSrc',
largeWrapper: 'preview'
});
</script>
As you can see I'm trying to get the image using myImgSrc and then I'm trying to use in the large: 'myImgSrc'. When I put the a fixed url in large: fixed-url-to-the-image, it works fine.

The element with #thumb id is the tag img it self, the current selector will not return the src value, so it should be simply:
var myImgSrc = document.getElementById("thumb").src;

You can get image src like this,
var thumb = document.getElementById("thumb").src;
You don't need to use getElementsByTagName.

let img = document.querySelector('#thumb');
console.log(img.src);
If you use img.src, you'll see the source of your img tag.

getElementsByTagName is superfluous - you already have the exact element you want - you selected it by its ID. You'd only need getElementsByTagName if you wanted to get one or more elements by their tag and work on them all, rather than identifying one precisely.
So actually the solution is very simple - just get the src attribute of the ID-selected element directly. Working demo:
var myImgSrc = document.getElementById("thumb").src;
console.log(myImgSrc);
<img id="thumb" src="https://url-to-a-image">

How to reference an image within quotation marks in a script

I am trying to reference an image instead of using text within the script tag in a html page. I am attempting to use an image for a button instead of text. When the button is pressed it changes to the text 'Paused' as shown below.
pauseButton.innerHTML = "Paused";
When it is pressed again it displays the words 'Pause'.
pauseButton.innerHTML = "Pause";
Instead I would like it to display an image I created. This code shows a section where I tried to reference the image.
pauseButton.innerHTML = "url(Images/pausebackground.png)";
Instead of displaying the image it displays 'url(Images/pausebackground.png)' in the form of text.
How can I reference the image within the quotation marks?

You need to put HTML code into innerHTML (as the name suggests). Use an <img> tag:
pauseButton.innerHTML = '<img src="Images/pausebackground.png">';

An image in HTML uses the <img> tag, which has a src attribute pointing to the image URL, as so:
<img src="Images/pausebackground.png">
To insert the image into the HTML, you could use innerHTML, but it is best to add an actual HTML element:
var image = document.createElement('img'); // Create the HTML element
image.setAttribute('src', 'Images/pausebackground.png'); // Set the image src
pauseButton.appendChild(image); // Place it inside the button
To set a different image, all you need to do is change the src attribute on the image tag.

The innerHTML property will change the html inside the element:
<div>
Here is the inner html.
</div>
If you wish to add a image to the inner html, you could use a normal image tag, but remember, just setting the innerHTML will remove anything that is inside of it already.
pauseButton.innerHTML = '<img src="Images/pausebackground.png" />'
If you wish to use the image as a background of the button (which I guess you would rather do) you could either just set the image as the elements style.backgroubndImage property or rather, create a css class and add it to the button when you need (through js).
// Alt 1, changing the style of the element:
pauseButton.style.backgroundImage = "url(Images/pausebackground.png)";
// Alt 2, creating a css class and adding it to the element when needed:
// CSS.
.my-special-button-class {
background-image: url(Images/pausebackground.png)
}
// JS.
pauseButton.classList.add("my-special-button-class");

Change the background image of an element

So I'm having some issues with creating a really simple function that's supposed to change the background image of a div element to match whatever image is being hovered upon by the mouse.
The HTML looks like
<div id = "image">
Hover over an image below to display here.
</div>
<img class = "preview" alt = "Styling with a Bandana" src = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon.jpg" onmouseover = "upDate(this)" onmouseout = "unDo()">
That's just the div element I want to change, alongside one of the images.
So our function is supposed to take in an image element as a parameter. But I'm having a lot of trouble accessing this image parameter's src attribute and using that in the .style.backgroundImage property.
My current code is:
function upDate(previewPic){
var div_element = document.getElementById('image').innerHTML;
var picurl = "url(previewPic.getAttribute('src'))"
div_element.style.backgroundImage = "url(picurl)";
}
And this gets me an error of Uncaught TypeError: Cannot set property 'backgroundImage' of undefined on my browser console.
If you can tell, I'm trying to put the actual div object into a variable, then put the picture url into a variable. Then I want to use the .style.backgroundImage property. This isn't working. But the solution is probably really simple. What could I do to fix it?

There are multiple issues with your code.
Getting the inner html is just setting your variable to a string representation of what's inside the element, which is nothing since it's an <img> tag.
Essentially, you're putting everything in quotes, so javascript doesn't do anything with it.
Remove the .innerHTML from the first line of the function, and then take the parts javascript needs to evaluate as code out of the quotes.
Change your code to:
function upDate(previewPic){
var div_element = document.getElementById('image');
var picurl = "url(" + previewPic.getAttribute('src') +")"
div_element.style.backgroundImage = picurl;
}
This should work.

If I understand on some image hover you want to change div background?
I would do it with jquery:
$('img').hover(function(){
$('div').css(''background-image:'url("image_link")');
});

Use result of function in html img tag

I try to use the result of a javascript function to fill in the 'src' value of IMG tags.
I want to use this on many places in same page, otherwise I think I could use an ID in the IMG tag and change src with getelementbyid.
The idea is to load images depending on the size of the userscreen.
The code which does not give me correct result:
<html>
<head>
<script>
function path_images(image)
{
var s = screen.width;
path = (s<1080) ? "small":"large";
return path + "/" + image;
}
</script>
</head>
<body>
<h1>Some text</h1>
<img alt="error" src=path_images("someimage.png")>
<img alt="error" src=path_images("someotherimage.png")>
</body>
Please tell me how to do this.

You could try this. It selects all elements with tag img and changes eachs SRC. If you want to change the source of one single image you should use ids or any other identifier.
function changeSource()
{
aImgs = document.getElementsByTagName("img");
for ( var index in aImgs )
aImgs[ index ].src = path_images( image_here );
}

Grab the images:
var images = document.querySelectorAll('img');
Convert the nodelist to an array and loop over it updating the src.
Array.prototype.slice.call(images).forEach(function (img) {
img.src = path_images(img.getAttribute('src'));
});

#ron for this purpose you just need to call a function on body onload, what this function will do? this function will very much get the screen width first and after the decision whether there would be small or large it will grab all the images coming at the page along with their src attributes, then loop over each (maybe foreach) of them in the same body onload function and concat the small or large before the path and this will fullfill your requirment.
Well function can't be call on img src tag it can be at onclick event. each javascript function is called at some event.

jquery lightbox select source/link based on content type

I'm trying to create a lightbox that uses the rel attribute and the href/src (depending on the type of content). I need an if/else statement to assign an href to a variable (contentURL) if the content's a video but assign the src instead if the content's an image.
html for video content:
html for image content:
<img src="images/photo.jpg">
Here's what I have so far:
$("a[rel='lightbox'").click(function(e){
e.preventDefault();
var shadow = $('#lightbox-shadow'),
lightbox = $('#lightbox');
shadow.fadeIn(300);
lightbox.delay(450).fadeIn(300);
var contentURL; //assign href or src to this variable
//IF/ELSE STATEMENT HERE
shadow.click(function(){
shadow.fadeOut(300);
lightbox.empty();
});
});
Also, if you could help me understand the ajax method for loading the content, that would be awesome! :)

Given the HTML above, one way to tell whether to grab the src or href attribute would be to test if the clicked link contains an image tag. I have a sample working with this code:
$("a[rel='lightbox'").click(function(e){
e.preventDefault();
var shadow = $('#lightbox-shadow'),
lightbox = $('#lightbox'),
$target = $(e.target).closest('a'),
$img = $target.find('img'),
contentURL;
shadow.fadeIn(300);
lightbox.delay(450).fadeIn(300);
contentURL = ($img.length > 0) ? $img.attr('src') : $target.attr('href');
console.log(contentURL);
});
You can see that working here if you open the console:
http://jsfiddle.net/9XELr/
However, this sample will only work if your youtube links never contain images. If they might, you will need to set up some other conditional logic, maybe a class or data attribute on the link itself that is different depending on the type of content.