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");
});
Related
I'm trying to replace the image by looking at the parent class to see if it has "trophy unearned" in it.
<picture class="trophy unearned">
<img src="https://i.psnprofiles.com/games/97e037/trophies/1Sac8cd2.png">
</picture>
So when any picture in the page has "trophy unearned" as class, the img src will be replaced by:
<img src="https://psnprofiles.com/lib/img/icons/40-hidden.png">
What code can I use it in Tampermonkey?
Thanks.
You can use document.querySelectorAll to get all the elements to then modify.
document.querySelectorAll('.trophy.unearned > img')
.forEach(img => img.src = 'https://psnprofiles.com/lib/img/icons/40-hidden.png');
You can simply use vanilla javacript to find the image tag and replace it's source.
let img = 'https://psnprofiles.com/lib/img/icons/40-hidden.png';
document.querySelector('.trophy.unearned img').src = img;
<picture class="trophy unearned">
<img src="https://i.psnprofiles.com/games/97e037/trophies/1Sac8cd2.png">
</picture>
<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>
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"));
});
});
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 tried to get the image height and width from a href link image, but no luck. is there anyone know how to solve this problem?
here is the code:
<a href="/images/int_kit_a_set.jpg" class="upload">
<img src="/Assets/images/int_kit_a_set_thumb.jpg"
ondragstart="return false" height="108" width="144" alt="" />
</a>
Your HTML:
<img src="/Assets/images/int_kit_a_set_thumb.jpg" ondragstart="return false" height="108" width="144" alt="" />
Javascript w/jQuery:
var image = $("<img />").attr("src", $(".upload").attr("href"));
$(document).append(image);
alert(image.height());
alert(image.width());
image.remove();
I didn't test the javascript... but I'm not really sure your question is clear... so maybe this is what you wanted, maybe not.
Essentially, I'm grabbing the HREF attribute of the link, creating a new image on the page with that url, measuring the image, and then removing it from the DOM.
You could add a style to the image which placed it off screen or something... but you'd have to mess with it to find something that worked cross-browser. Some browsers don't consistently load images which aren't visible. I'm also not sure if you'd run into any timing issues with my script.
Putting it all together:
alert( new Image().src = $('.upload').attr('href')).width );