I have some code on my page that looks like this:
<div class="img-center">
<img src="img-path.jpg" alt="alt-text" class="feature-image" />
</div>
I am setting up a Print Stylesheet and due to some javascript manipulation of the content (and possibly a bug in firefox) the img prints off center. The solution I am going to do is have the img inserted dynamically into another div that will show when printed but I do not know how to have jQuery read the img div and then copy it into the other div. The code example for the other div would be something like this:
<div id="feature-container-print">
<img src="jQuery inserted copy of above img-path.jpg" alt="alt-text" />
</div>
How is this done? Please provide an example.
$('#feature-container-print img').attr('src',$('.feature-image').attr('src'));
I believe this would work:
$('.feature-container-print img').attr('src', $('.img-center img').attr('src'));
$('.img-center img').hide();
$('.feature-container-print img').show();
Related
Is there a way to use jQuery to change a part of an image's source URL?
I'm working on a page that has a number of image elements that are all programmatically generated (but I'm not able to access the source code that generates them). And they all share the same class.
Let's say I have the following HTML:
<img src="https://cdn.example.com/pictures/01.jpg" class="photo">
<img src="https://cdn.example.com/pictures/02.jpg" class="photo">
<img src="https://cdn.example.com/pictures/03.jpg" class="photo">
<img src="https://cdn.example.com/pictures/04.jpg" class="photo">
Simple enough. But now, what if I want to point them all to a different directory? Like: /images/
So far, I've tried a few things, including this bit of jQuery, but nothing's done the trick so far:
$("img.photo").attr("src").replace("pictures","images");
That feels like it should do it because it's targeting images with that class -> then the "src" attribute -> and telling it to replace "pictures" with "images."
But I'm extremely new to using jQuery, so I'd appreciate some help.
What am I missing here? Any advice?
UPDATE: Huge thanks to those who provided answers and explanations — I really appreciate you helping a beginner!
In your code you simply change the returned string from
$("img.photo").attr("src") without doing anything with it afterwards. This will not change the attribute in your <img> elements.
This should do the job:
$("img.photo").each(function(){this.src=this.src.replace("pictures","images")})
Here I go through all the matched elements and assign the changed src string back to each element's srcattribute.
$("img.photo").each(function(){this.src=this.src.replace("pictures","images")});
// list the changed src values in the console:
console.log($("img.photo").map((i,img)=>img.src).get())
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img src="https://cdn.example.com/pictures/01.jpg" class="photo">
<img src="https://cdn.example.com/pictures/02.jpg" class="photo">
<img src="https://cdn.example.com/pictures/03.jpg" class="photo">
<img src="https://cdn.example.com/pictures/04.jpg" class="photo">
Your code snippet won't work, because that's grabbing the src attribute of the first image, and changing it, but never setting the result as the new src on the <img> elements.
Try this
$("img.photo").each((index, img) => {
img.src = img.src.replace("pictures","images");
});
I have this HTML class where I want to replace the img src with different image. Have been able to find something close but nothing quite working.
HTML:
<div class="playoff-img">
<img src="src/img/imga.png">
</div>
Javascript:
$('div.playoff-img:contains("src/img/imga.png")').replaceWith('src/new/image/imgb.png');
You need an attribute selector and use .attr to set the src attribute.
$('div.playoff-img img[src="src/img/imga.png"]').attr('src', 'src/new/image/imgb.png');
The Js way of solving this problem
document.getElementsByTagName("img")[0].setAttribute("src","http://www.gstatic.com/webp/gallery/4.jpg");
The jQuery way of solving this problem
$(".playoff-img img").attr("src", "http://www.gstatic.com/webp/gallery/4.jpg");
simple and easy !
$(".playoff-img img").attr("src", "put new source address here");
Use [attr*="value"] to select an attribute that contains a particular string. Next you will want to use attr() to set the attribute to something new.
$('div.playoff-img img[src*="src/img/imga.png"]')
.attr('src', 'src/new/image/imgb.png');
<!-- use jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="playoff-img">
<img src="src/img/imga.png">
</div>
<script>
$(function(){
$(".playoff-img").attr("src", "put new source address here");
});
</script>
Is there a way to fetch the content of a div and place that ocntent in the 'src' parameter of an image? I'm working on a project that uses json to load translation files, and tehrefore I can't load an image directly, but figured I could at least load the image name.
So:
<div id="flag-name" style="hidden">en-flag.jpg</div>
<img src="DIV CONTENTS HERE">
Ideas appreciated! (Am also using jquery so open to that as well)
The button demonstrates that ablility. Use the button's onclick code wherever you need.
<div id="flag-name" style="hidden">en-flag.jpg</div>
<img id="myImage" />
<button onclick="document.getElementById('myImage').src=document.getElementById('flag-name').innerText">Change</button>
You can simply do it in jQuery by getting the text of the div and then setting the source of image like this:
var source = $("#flag-name").text();
console.log("before - " + $("#image").attr("src"));
$("#image").attr("src",source);
console.log("after - " + $("#image").attr("src"));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="flag-name" style="hidden">en-flag.jpg</div>
<img id="image" src="DIV CONTENTS HERE">
You need an event to start the jQuery/javascript -- so I added a button. Also, you will find it easier to target specific DIV and IMG tags if you give them IDs or classes.
$('button').click(function(){
var mySrc = $('#flag-name').text();
$('img').attr('src', mySrc);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="flag-name" style="hidden">http://placeimg.com/300/200/animals</div>
<img src="DIV CONTENTS HERE">
<button>Go</button>
I want to change the image src on hover with javascript, but here is the twist
Here is my HTML
<div class="foo">
<div class="foo-2">
<form>
<input type="image" src="I want to change this on hover">
</form>
</div>
</div>
I reviewed the ansewr of this question CSS: Change image src on img:hover
here is a quote of the answer:
"
And if you think you can use some javascript code then you should be able to change the src of the img tag as below
function hover(element) {
element.setAttribute('src', 'http://dummyimage.com/100x100/eb00eb/fff');
}
function unhover(element) {
element.setAttribute('src', 'http://dummyimage.com/100x100/000/fff');
}
and the html be
img id="my-img" src="http://dummyimage.com/100x100/000/fff" onmouseover="hover(this);" onmouseout="unhover(this);" />
It is helpful, but I'm really having trouble targeting the type image in my code, so that I can change it with javascrit.
I don't think changing source on hover is such a great idea. why? the images need to load and they can take relative long time to load and confuse the user if nothing happens within the 1. second.
it'd be better if you pre-load both images and then use css to hide/show the correct image on hover. this way it will show instantly.
i tried to generate img tag with javascript
(when clicked on link, image is created)
The problem is that when the image is generated, all other objects(other images or text) are overwritten and i cannot reach them anymore
i have something like
document.getElementById("picturediv").innerHTML=picturetag;
in html
<div id="bigger">
<div id="picturediv"></div>
<div id="div for some other stuff"></div>
</div>
It should work, unless picturetag is breaking the html.
<div id="bigger">
<div id="picturediv"></div>
<div id="div for some other stuff"></div>
</div>
<script>
document.getElementById("picturediv").innerHTML="<img src='"+pictureLocation+"'>";
Assigning the innerHTML indeed "overwrites" any previous content of the element.
To append the image to the existing contents have:
document.getElementById("picturediv").innerHTML += picturetag;
Assuming picturetag contains valid HTML - if no luck please post more code especially what is picturetag and how it's created.
Try something like this:
document.getElementById('picturediv').appendChild(picturetag);
That will append the image to the div