I'm currently stuck trying to get the image source (eg: ./imgs/image.jpg) from an image element.
I've managed to get it working, partially, by using the following:
var image = document.getElementById("home-our-doughnuts-box-image").getAttribute("src");
But I need to use $(this).find("#MY_IMAGE_ELEMENT_ID_HERE").getAttribute("src"); so it references the correct box and image (I have multiple containers with elements in them that share the same ID, same with the box).
So how can I access the images src attribute to return the unresolved path using $(this).find(), as it's not working ?
Thank you.
EDIT
I am using this because I have assigned a click function to each of the boxes. So need to use $(this) to reference that particular box.
Full Code:
box.onclick = function() {
var image = $(this).find("#home-our-doughnuts-box-image").getAttribute("src");
alert(image);
doughnutExpandedName.text($(this).find("#home-our-doughnuts-box-name").text());
doughnutExpandedDesc.text($(this).find("#home-our-doughnuts-box-desc").text());
};
Try this:
var src = $(this).find("#MY_IMAGE_ELEMENT_ID_HERE").attr("src");
Related
I am trying to change background of an element with id = "image" using source attribute of an image in the html. The source is an absolute url on the web and its loading perfectly at other places of html.
The problem is in the last line of the code. previewPic is an image object that I am passing to this javascript code.
I have created a var x to see if I am getting the src correctly and thats working fine. I am seeing correct in the console.
I have already tried different combinations of "x" "url(x)" etc.
function upDate(previewPic) {
var x = previewPic.src;
document.getElementById('image').innerHTML = previewPic.alt+" "+x;
console.log(x);
document.getElementById('image').style.backgroundImage = "url(x)";
}
File not found error.
I'm working on a script for a website, and I need to change the icon of one of its images. The problem is the image on the site only has a tag like this:
<img src="/pic1.png" alt="clear" >
I have tried selecting the image by using:
document.querySelector("img[src='pic1.png']");
What I have tried looks like this:
var y = document.querySelector("img[src='/pic1.png]'");
y.innerHTML = "<img src='pic2.png' alt='clear'>";
I also tried
var y = document.querySelector("img[src='/pic1.png]'");
y.src = "/pic2.png";
Is there anyway I can find the image using the src attribute, assign it to a variable, then replace the src?
Your help is appreciated :)
Your last example should work
var y = document.querySelector("img[src='/pic1.png']");
y.src = "/pic2.png";
y.load()
How about you set an Id on that element, then select it using document.getElementById(), then you can proceed to access the src property, which can help you change its value.
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")');
});
According to the documentation, I should be able to set the image property of the ngImgCrop directive to an image URL, instead of to a data url. However, it does not seem to be working. I have a input text box (for the user to enter the image's url), and a button, which triggers the update of ngImgCrop's source image for cropping. Here is my code so far:
Here is the definition of the ngImgCrop Element
<img-crop
image="myImage"
result-image-size="300"
area-type="square"
area-min-size="40"
result-image="product.ImageString"></img-crop>
Here is the AngularJS in the app.js
var handleUrlSelect = function getImageDataURL(evt) {
var url = (document.querySelector('#inputImageUrl')).value;
$scope.myImage = url;
};
angular.element(document.querySelector('#selectUrl')).on('click', handleUrlSelect);
The current behavior is that the source image is not being set at all. Any help would be appreciated! Thanks!
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.