JS : Getting image id using onmouseover - javascript

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

Related

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');

Is there a way to hide an "Image not found" error icon without "this.style.display = 'none'"

I'm trying to have multiple image boxes in a span, with no pre-determined src. This is for a basic game of blackjack as a task I have set myself to do in JavaScript.
Currently, here is my HTML code for the span of image boxes.
This site is not being hosted, I'm running it via my browser; no JQuery
<span> <!-- Players Cards -->
<img class='imagebox' id='imagebox1' src=''></img>
<img class='imagebox' id='imagebox2' src=''></img>
<img class='imagebox' id='imagebox3' src=''></img>
<img class='imagebox' id='imagebox4' src=''></img>
</span>
In my JavaScript file, after a card has been selected, I use interpolation to get an image. It will be dealt by changing image.src as shown:
function deal(box) {
let card = randomcard()
const image = document.getElementById(`imagebox${box}`)
if (image.src !== card) {
image.src = `cardpng/${card}`
}else {
redeal()
}
}
My issue is that, since no src has been defined for each image box, until it has been assigned a src, it will have an "image not found" icon, which for aesthetic purposes I'd like to remove.
I tried:
<img class='imagebox' id='imagebox1' onerror='this.style.display = "none"' src=''></img>
However, in doing so, this.style.display remains as "none", even after a src is defined and there should be no error.
I understand I could just write a function once a card has been dealt to change it back, however I'm looking for something prettier which will be easier and less communication between HTML and JS.
Thanks in advance for replies.
Use CSS
img[src=""] {
display: none;
}
Like this -
setTimeout(() => document.getElementById('imagebox1').src = "image.jpg", 2000)
img[src=""] {
display: none;
}
<span> <!-- Players Cards -->
<img class='imagebox' id='imagebox1' src=''/>
<img class='imagebox' id='imagebox2' src=''/>
<img class='imagebox' id='imagebox3' src=''/>
<img class='imagebox' id='imagebox4' src=''/>
</span>
However - are you sure you're seeing an image not found icon?? I don't see any here
<span> <!-- Players Cards -->
<img class='imagebox' id='imagebox1' src=''/>
<img class='imagebox' id='imagebox2' src=''/>
<img class='imagebox' id='imagebox3' src=''/>
<img class='imagebox' id='imagebox4' src=''/>
</span>
note: img does not have a closing tag - it's either <img ...../> or <img .....> with no </img>
A solution that would work even for actually broken images, and not just for the ones you haven't set their src yet, is to set the alt attribute to the empty string:
<section>
<p>With <code>alt=""</code></p>
<img alt="">
<img alt="" src="">
<img alt="" src="https://example.com/broken-image.jpg">
<img alt="" src="https://www.fillmurray.com/50/50">
</section>
<section>
<p>Without</p>
<img>
<img src="">
<img src="https://example.com/broken-image.jpg">
<img src="https://www.fillmurray.com/50/50">
</section>
However beware that with this solution your images are converted to empty text nodes for the renderer, which don't take any space, but which make the neighbor white spaces get rendered. So for instance in the above example, the new lines between each <img> tags are visible as a single space text node in the rendered page, just like they are when the images are rendered.
However this is an issue only when the images are presented inline like here.

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">

How to get the entire HTML of an image on hover?

<img src="https://cdn131.picsart.com/271777618047201.jpg?r240x240"
crossorigin="anonymous" id="image" width="400">
Lets imagine, I have a HTML tag as follows:
<img src="https://cdn131.picsart.com/271777618047201.jpg?r240x240"id="image" width="400">
I can get the image element by const tag = document.getElementById('image');. Now, my only ask is, how do I get the html tag as above, on just hovering over the image.
You can use the target property of your event object:
document.querySelector('div').addEventListener('mouseover', e => {
console.log(e.target);
});
<div>hover me</div>

I’m using a multilanguage script to change from lanquage. Now I’m having troubles in using by the image

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');
});

Categories