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');
Related
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">
I have the following lines of code in my website:
HTML:
<div class="the-post-thumbnail">
<p><img src="http://placehold.it/350x150/FF0000/FFFFFF?text=Automatic+Thumbnail" alt="" width="" height="" /></p>
</div>
<div class="post-body">
<p><img src="http://placehold.it/350x150/00FF00/FFFFFF?text=Manual+Thumbnail" alt="" width="" height="" /></p>
<p>Paragraph</p>
<p><img src="http://placehold.it/350x150/0000FF/FFFFFF?text=Body+Image" alt="" width="" height="" /></p>
</div>
JavaScript/jQuery:
var ele = $('.post-body p:has(img):first');
if ($('.the-post-thumbnail img').length) {
ele.hide();
}
else {
ele.show();
}
What I am trying to do is:
Check if there is an image within the the-post-thumbnail div and if so, hide the manual thumbnail image within the post-body
Check if there is not an image within the the-post-thumbnail div and if so, show the manual thumbnail image within the post-body
This is partially working, however, what I've noticed is that if I remove the manual thumbnail image from within the post-body div, it will remove the second body image after the paragraph tag as well.
How can I target just the manual thumbnail image which is directly within the post-body div correctly so that I can achieve the two list items above, without adding additional classes?
FYI:
This is due to swapping my website's theme for a different one. The older version required me to place in a thumbnail image for each post manually at the top of the article, and the new theme does this for me automatically. This resulted in duplicate images for older posts.
CodePen Example
Working fiddle.
Just changing the position of :first selector should do the work, because it will select always the first p and check if it has an image :
var ele = $('.post-body p:first:has(img)');
Hope this helps.
Without using any extra selectors, you could check for an image in the first paragraph.
var ele = $('.post-body p:eq(0):has(img)');
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
I’ve made a cardspread program that is based on the source of the image. It works allright, but it is loading slowly, because now 78 different cards are loaded. I like to speed up the loading and I thought I needed an extra item per DIV. So I added an ALT-tag to each image. Like this:
<div id="kaart1">
<alt=kaart14.jpg>
<img src="images/kaart1.jpg" width="110" height="180" onclick="showDiv(event)>
</alt=kaart14.jpg>
</div>
Now I need only 1 image to load 78 times, which is faster. The problem which I am facing now is that I want to read the alt value into a variable (in this case: kaart14.jpg).
I’ve tried :
$('.status').click(function() {
var status = $(this).attr('alt');
});
But that stays empty. Does anyone have a suggestion how to solve this in Javascript or jQuery?
First, there is no <alt> tag. It is used as alternative to <img>. The value is displayed if the image is not loaded.
It is just plain text. If you put a url there, it will just display the url and not the image itself.
Eg:
<img src="myphoto.jpg" alt="This is my photo">
There is no performance gain if you use alt or not, but you definitely SEO
Your alt attribute should be like
<div id="kaart1">
<img src="images/kaart1.jpg" alt="kaart Image" width="110" height="180" onclick="showDiv(event)>
</div>
alt is an attribute of the img tag,its not a tag itself.And as #Bergi said,the alt attribute will not be an another image.It may be the description.
I am new for script and jQuery
I’m using a multilanguage script to change from language. Now I'm having troubles to change from a language by using the image,
<img src="/flags/us.png" alt="en_EN" />
<img src="/flags/it.png" alt="it_IT" />
<img src="/flags/fr.png" alt="fr_FR" />
here after i dnot know how to use this image tag
what i want from this image tag , when i am click this image i want the alt value of corresponding image click.
Hoe to get it...
its possible or else give any other idea
thanks
Kumar
Put a class in your anchor and try this
<img src="/flags/us.png" alt="en_EN" />
<img src="/flags/it.png" alt="it_IT" />
<img src="/flags/fr.png" alt="fr_FR" />
$('a.lang img').click(function(){
var alt=$(this).attr('alt');
});
<a class='lang_link' href="#"><img src="/flags/us.png" alt="en_EN" /></a>
Assuming your links have a class of lang_link, you can look inside the link to see what language should be chosen.
$('.lang_link').click(function(){
var lang = $(this).find('img:first').attr('alt');
});