how to change img src attribute as it's parent select - javascript

I am using this code for my carousel, I want to change src attribute of an <img> tag base on it's parent "aria-selected" attribute set it to "true" manually.
$(".item").on('click',function(event){
$(this).parent('a').attr("aria-selected","true")
}
How can I achieve this, with javascript?

If I understand correclty you want to get the image element in the current item scope and replace its src. So something like this should work:
links.forEach(function(item) {
item.setAttribute("aria-selected", "false");
var image = item.querySelector('img');
var currentSrc = image.getAttribute('src');
var newSrc = currentSrc.replace('.png', '-active.png');
image.setAttribute('src', newSrc);
});

Related

JavaScript - capture img tags src in variable

im trying to store an image in HTML that comes from a url source in a variable using JavaScript. Could someone show me what code is required? i have started it off...
var productImage = document.getElementById("productImg").//??;
<img id="productImg"
src="https://i5.walmartimages.com/asr/1735db1c-d84f-417a-b871-27b63ee2b2e6_1.9a18f15c0e0fa321d0c5d073875b9738.jpeg?odnWidth=undefined&odnHeight=undefined&odnBg=ffffff" >
You were close. To obtain the value of an HTML element's attribute, you can access that attribute as a property of the DOM element.
var productImage = document.getElementById("productImg").src;
console.log(productImage);
<img id="productImg"
src="https://i5.walmartimages.com/asr/1735db1c-d84f-417a-b871-27b63ee2b2e6_1.9a18f15c0e0fa321d0c5d073875b9738.jpeg?odnWidth=undefined&odnHeight=undefined&odnBg=ffffff" >
You can use the src property.
var productImage = document.getElementById("productImg").src
You can also use the src property to set a new URL for the image if you want to replace it.
var productImage = document.getElementById("productImg");
productImage.src = URL

How to make a photo appear when clicking on another photo? Javascript, DOM

I have an assignment where I need to make a photo appear when I click on another photo. I need to put each image in an array and call on it to appear when I click on the corresponding photo. When I click on another photo, I need to remove the existing photo and replace it with another one. I need to do it with Javascript and the DOM. I'm unsure how exactly I would do this. Here's my code so far:
var photoDiv = getElementById("photos");
document.getElementById("0").addEventListener("click", function () {
var img = createElement("img");
photoDiv.appendChild(img);
})
I know it's completely wrong but I don't know what to do to fix it :(
You have to add the image source of your image.
After this line:
var img = document.createElement("img");
img.src = 'pathto/yourimg.png_or_jpg'; // You need this.
Also, it's always a good practice to use document.getElementById() (or putting the parent) instead of just getElementById().
Instead of creating a new image you can also replace only the src of the image element, something like this:
// get the image
var imgElement = document.getElementById("myImage");
// add the listener
imgElement.addEventListener("click",
function () {
// update the src of the image
imgElement.src = "https://www.w3schools.com/html/img_girl.jpg";
});
and that's all, you should not create a new element and append it to the DOM element.

How to change element "this" in jQuery?

I have this piece of code, which allows me to change the image by clicking on it.
$('img').click(function(){
var src = this.src;
this.src = src.indexOf('_b.jpg') == -1 ? src.replace('.jpg','_b.jpg') : src.replace('_b.jpg','.jpg');
});
I would prefer to click on another element to still be able to change the image. When I change the part in $('myelement'), I need to make sure that the part var src = this.src; refers to the image.
In what do I have to change the this?
Assuming you have only one img tag in your HTML:
$('myelement').click(function(){
var src = $('img').attr('src');
var newSrc = src.indexOf('_b.jpg') == -1 ? src.replace('.jpg','_b.jpg') : src.replace('_b.jpg','.jpg');
$('img').attr('src', newSrc);
});
But generally it's better to select with more specific selector, like id or some unique class attribute, as you might want more images in the document - then $('img') will select an array of all images.
In javascript this refers to current object, in other words contex. General practice is storing context into a variable so that when context changes, lets say by a dom event, you can still reach it.
// stores context into that variable
var that = this;
But apparently your question has nothing to do with this. If you need to change image attributes from another element, you need select the img tag and act on it.
$('.another-element').click(function(){
var newSrc = 'Here goes the new scr attribute';
$('img').attr('src',newScr);
});
You can use id or class for more precise selection.

javascript replace img src with full img url

ok so I have a JSON feed which for some reason gives some images like
img src=\"..\/..\/upload\/Politcis\/Tony-Abbott.jpg\" alt=\"Tony-Abbott.jpg\" width=\"980\" height=\"653\" align=\"left\" \/>
full JSON string http://media.queerdio.com/mobileDevice/?uri=loadstory/high-court-to-decide-on-act-marriage-law
What I would like to know if how can I with javascript replace the img src with the full img src.
for this image according to there API the full img src should be.
http://media.queerdio.com/news/upload/Politcis/Tony-Abbott.jpg
what I know if I would have to first get the src link, and split it at the beginning of upload
then I would need a var linking to http://media.queerdio.com/news/
then I would add the upload and the rest of the src link to it, then replace the img src.
so I understand the basics of what I want to do but note 100% sure how to do what i need.
Here is the pseudo code in case your site already has jQuery:
var htmlFromJson; //you json object
var imgHost = 'http://media.queerdio.com/news/';
$(htmlFromJson).find('img').each( //find the img from the JSON str
function(){
var newSrc = imgHost + $(this).attr('src'); //access add custom host in img src
newSrc = fixUrl(newSrc); //remember to replace the ../ & parent folder name
$(this).attr('src', newSrc); // update the
}
);
Hope I can help you. PS: if you somewhere mis-understand, let me know, I try to solve.

Change attribute from data-src to src WITHOUT jQuery

I am building a lightbox, in pure JavaScript. I currently have my images loading via AJAX, but i know it is easier to just have the img data-src attribute being replaced onclick to src.
I however have NO idea how this is done in pure JavaScript, by that i mean, without using any libraries.
Can anyone tell me how this is done?
to sum up: How do i change ex:
<img data-src="URL"/>
to:
<img src="URL"/>
without jQuery.
You can do it like shown below:
var imgEl = document.getElementsByTagName('img');
for (var i=0; i<imgEl.length; i++) {
if(imgEl[i].getAttribute('data-src')) {
imgEl[i].setAttribute('src',imgEl[i].getAttribute('data-src'));
imgEl[i].removeAttribute('data-src'); //use only if you need to remove data-src attribute after setting src
}
}
The above code will fetch all img tags, check if they have a data-src attribute and if present, replace it with src.
Demo Fiddle
Get a handle on the image element, and then set it's src property, using the value from getAttribute().
Plain Javascript doesn't have any helper functions to handle data-* attributes, it just treats them as any other attribute.
var img = document.getElementById("myimg");
img.src = img.getAttribute("data-src");
You can use forEach with querySelectorAll
var imageElements = document.querySelectorAll('img');
imageElements.forEach(c=> c.setAttribute('src',c.getAttribute('data-src')));
img{width:100px;}
<img data-src='https://cdn4.iconfinder.com/data/icons/nature-20/512/79-512.png' />

Categories