We Keep Coding

How to change same images at multiple places using JS?

I want to know the solution that will help me change multiple same images using JS.
For example: There are 3 image tags below.
<img class="photo" src="myphoto.png">
<img class="photo" src="myphoto.png">
<img class="photo" src="myphoto.png">
And I want to change all the "myphoto.png" to "theirphoto.png" at once without change in every line.

You can get all of the elements with document.querySelectorAll and loop over them to change each src.
document.querySelectorAll('img.photo').forEach(img => img.src = 'theirphoto.png');

Changing img source onmouseover using only javascript and 'this'

Trying to change img src attribute to src matching another picture on site which user hovered over. I have 1 (main) picture and I have 3 below it (sub), acting as a gallery. When user hovers over one of those 3, I want src attribute of main to change to src of sub image.
All resolutions I found so far, use either 1 image whose source is changed in code or only specific sources declared but I don't want to add sources in code every time a new image is added, instead, using i.e. gallery(this) for each sub-image should resolve it but I'm having no luck so far.
Apologies if there is same question, I just couldn't find it. If this explanation is too complicated, feel free to ask, I'm looking forward resolving this, if possible.
Tried to use function name(this) to exploit source of image and add it to main picture.
I'm really just starting with all of this so this what I tried so far probably isn't even close enough, hope you will understand.
<img class="hover" src="imgs/mountain.jpg" id="hover" alt="">
<div class="imgs">
<img onmouseover="gallery(this)" src="imgs/castle.jpg" alt="">
<img onmouseover="gallery(this)" src="imgs/mountain.jpg" alt="">
<img onmouseover="gallery(this)" src="imgs/tree.jpg" alt="">
</div>
<script>
function gallery(element) {
x = document.getElementById('hover');
x.src.element;
}
</script>

You aren't actually changing the src. You can do so by setting x.src to element.src:
function gallery(element) {
x = document.getElementById('hover');
x.src = element.src;
}
<div class="imgs">
<img onmouseover="gallery(this)" src="https://picsum.photos/100?random=1" alt="">
<img onmouseover="gallery(this)" src="https://picsum.photos/100?random=2" alt="">
<img onmouseover="gallery(this)" src="https://picsum.photos/100?random=3" alt="">
</div>
<img id="hover" alt="hover">

As Kobe states in their answer, to set the src you can use img.src = {source}.
I would recommend that you add event listeners to each image, rather than using attributes to call the function. This provides a much cleaner solution. I have added the .gallery class to each image, then, it loops through these elements adding the event listener.
function displayImage() {
x.src = this.src;
}
// Pull this out of the function to avoid the lookup every time
var x = document.getElementById('hover');
// Loop through each element with the gallery class and add the event listener
document.querySelectorAll(".gallery").forEach(function(img) {
img.addEventListener("mouseover", displayImage);
});
<div class="imgs">
<img class="gallery" src="https://picsum.photos/100?random=1" alt="">
<img class="gallery" src="https://picsum.photos/100?random=2" alt="">
<img class="gallery" src="https://picsum.photos/100?random=3" alt="">
</div>
<img id="hover" alt="hover">

Change img src from parent anchor href

I have 150+ Links with internal image tag. Like this :
<img src="LINK2" width="60" height="45" border="0">
Now what i want is to image src LINK2 to LINK1 on page load. So the output will be :
<img src="LINK1" width="60" height="45" border="0">
My jQuery code so far :
$("img").attr("src",$("img").parent().attr("href"))
Thanks.

itsgoingdown is correct - you want to use a .each() fn to do this, but I would attack it the other way around:
$("a").each(function(){
$(this).find('img').attr("src", $(this).attr("href") );
});

For the attr src value, you can include function which will return href from the parent <a> for each image, this way you don't need to loop trough that img collection twice.
$("img").attr("src",function(){
return $(this).parent('a').attr("href");
});

Add an image id by finding the image alt

There is an image without an id on a page that I can't manually access to change the html. I'd like to be able to add an id value in a javascript file that I do have access to.
I found this thread:
Finding An image tag using the alt text
And this one:
Replace image and image title/alt text with Javascript
And I've been trying a few variations to get it to work.
Can someone show me where I'm going wrong? I'm currently using:
$('img[alt="close_pop"]').attr('id','close');
I don't think I'm fully understanding, as this is what I thought it was doing:
$('img[alt="close_pop"]') //getting the image based on the alt tag using jquery.
.attr('id','close'); //then I was applying a new id to that image.
All help appreciated!

Inspect the element and search for the id. It gets alt's value:
$(window).load(function() {
var img = $('img[alt="test"]');
var alt = img.attr('alt');
console.log(alt);
img.attr('id', alt);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<img alt="test" src="" />

<img src="smiley.gif" class="smile" id="smiley" alt="Smiley face" width="42" height="42">
$(window).load(function(){
$("img").click(function() {
var img = $("img[alt='Smiley face']");
img.attr("id", "fool");
console.log(img.attr("id"));
});
});

JS : Getting image id using onmouseover

i have 4 images in my document , 1 at the top and three at the bottom now what i want when i hover over any of the bottom 3 images i get its id and replace the above image with this image using onmouseover , like this
<script >
function chanageimg(id)// here i want to pass hovered image src
{
document.getElementById("top_image").src=id;
}
</script>
<div id="top" >
<img src="top.jpg" id="top_image" />
</div>
//here is the bottom image ,
<div class ="floats one">
<img src="img1.jpg" id="img1" onmouseover="changeimg()" />
</div>
how do i get its src to be passed in aboce function . i dont want to use Jquery . here as its for learning purpose

One small change to your HTML:
<img src="img1.jpg" id="img1" onmouseover="changeimg(this.id)" />
this is the image being moused over, and this.id is the parameter you want to pass to your function.

Inside the function changeimg(e), use e.target.id to get the id. If you do this, you don't need to add this.id to every onmouseover="" in your images. Just use onmouseover="changeimg".

To change the image you have to change the src
<img id="img-top" src="">
<img src="img1.jpg" onmouseover="changeimg(this.src)">
function changeimg(src){
document.getElementById("top_image").src = src;
}
EXAMPLE