Add an image id by finding the image alt - javascript

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

Related

Use google chart API url to dynamically set img source

How can I change the src attribute of an img tag with a google chart api url?
At first, I've this in the html body.
<img class="image2" />
Then I want to change the src with a chart URL.
So far I've tried with JQuery
$("#image2").attr('src', 'https://chart.googleapis.com/chart?cht=p3&chs=250x100&chd=t:60,40&chl=Hello|World');
Javascript
var image = document.getElementsByClassName("image2");
image.src = "https://chart.googleapis.com/chart?cht=p3&chs=250x100&chd=t:60,40&chl=Hello|World"
However no image is displayed.
Is it possible to do this? Thanks!
when using jquery to select by classname,
use a period instead of pound sign.
<img class="image2" />
$(".image2")
pound sign is for id selector
<img id="image2" />
$("#image2")
see following working snippet...
$(".image2").attr('src', 'https://chart.googleapis.com/chart?cht=p3&chs=250x100&chd=t:60,40&chl=Hello|World');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img class="image2" />

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>

DIV Conditioning - Checking if an IMG exists within a DIV

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

How to put the ALT-value of an image into a variable in javascript or jquery

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