I have a JavaScript Image object that I load dynamically with jQuery.
What I want to do is change a <img /> image with one stored on my Image object. How should I do this?
Note: I want to avoid changing the source of my <img /> tag as it downloads it again from the server, and I already have the image stored in my image object
You mean
$('#imageToChange').replaceWith(imageObject)
?
New Image object:
var Image_off = new Image();
Image_off.src = 'first.jpg';
image src change with jQuery:
$("#my_image").attr("src",Image_off.src);
With jQuery...
have both images already on your page and show or hide either one, based on a logical condition.
Make your new image in javascript memory, and then append it after the original image, then remove the original. You may also wish to cache the original before removing it in case you would like to re-use it.
html
<img id="replace" />
js
var img = new Image();
img.src = "someUri.png";
$("#replace").after(img);
$("#replace").remove();
Related
<img src="../1.jpg" alt="" id="change-image">
<button id= "press-to-change">Press</button>
let count = 0;
let arr = ["1.jpg","2.jpg","3.jpg","4.jpg","5.jpg"]
document.getElementById("press-to-change").addEventListener("click", function(){
count++;
document.getElementById("change-image").src = "../" + arr[count]
So we have an HTML with an image and a button and in JS we have an array with images and we want to change the src of the image when we press the button(this is only a part of the code)
The above code works fine but i have a question why with:
document.getElementById("change-image").src = "../" + arr[count] code works fine but with document.getElementById("change-image").src = `url('../${arrImage[count]}')` code doesn't work.
For example this next code from another project works perfectly imageContainer.style.backgroundImage = `url('../${arrImage[count]}')`
background-image is a for style of an element and uses css format.
src is for the actual source of the image element and requires a valid path only
With images, you use or assign to the src property only for <img> elements.
If you want to set the background image of an arbitrary (but non-<img>) element, you need to use different syntax: you have to assign to the style.backgroundImage property, and you have to surround the URL you're setting with url(...)
The rendered HTML markup looks like this:
<img src="foobar.png">
<div style="background-image: url('foobar.png');"></div>
They're not interchangeable. With the background-image property, you need to always use url(...). With the src attribute, you need to never use url(...).
The text: url(image.jpg) is syntax only used in CSS.
That’s why it works for backgroundImage but not src
An image will always need src="path/to/image.jpg" without url() surrounding it.
Basically, I have an html document that has some static images and images I would like to change on a timer. I've got that working, but the rotating images go to the first <img> in the html, which is supposed to be static. How do I designate where to put the changing images?
This is what I have, and it works - the images change, but not where I want them to.
<html>
<div id="staticImage">
<img src="pic1">
</div>
<div id="changingImage">
<img id="changePics">
</div>
</html>
//My javascript to rotate the images:
var imageArray = [];
var index = 0;`
function loadImages(){
imageArray[0] = new Image();
imageArray[0].src = "img/a.jpg";
imageArray[1] = new Image();
imageArray[1].src = "img/b.jpg";
imageArray[2] = new Image();
imageArray[2].src = "img/c.jpg";
imageArray[3] = new Image();
imageArray[3].src = "img/d.jpg";`
document.images[0].src = imageArray[0].src;}
function rotateImage() {
index ++
if (index > 3) {
index = 0}
document.images[0].src = imageArray[index].src;}
//The javascript always lands in the "staticImage" `<div>`.
Your document.images[0].src will always return the first image in the document. Looking at the HTML part, staticImage is coming ahead of changingImageso, loadImages and rotateImage will always change the first image in the DOM structure.
One way can be passing element IDs into the functions and the functions change images from the passed IDs.
Here is a hint, which would probably help you to solve the issue.
Simple way to get element by id within a div tag?
If you you can't figure it out, then come back again.
You don't need to do this with JavaScript has it will impact performance on browser and mobile depending who your audience is but you should prepare for both. The best way to do this is by using CSS and carousel through the images. Basically you create a div with overflow-x:hidden and cycle through the images moving from left to right every second or so. I provided a howto with a demo for you to try out.
howto with demo
I want to change the word of the large crop link for word with javascript. The url changes every update, but the suffix "large" continues, but I wanna change every update to "crop". I am a beginner, I'm sorry for this boring question
<img id="cover" src="https://i1.sndcdn.com/artworks-000088629087-uoefpq-large.jpg">
to
<img id="cover" src="https://i1.sndcdn.com/artworks-000088629087-uoefpq-crop.jpg">
var elt = document.getElementById("cover");
elt.src = elt.src.replace("large", "crop");
Note that this may not work as you expect if the "crop" is in the url more than once.
Use document.getElementById to get the cover element
var src = document.getElemtnById('cover').src;
Modify the src variable
src = src.replace('large', 'crop');
Update the src attribute
document.getElemtnById('cover').src = src;
In my HTML document I want to create a placeholder for an image but leave the source 'To be determined' so to speak so that when I put a link on the image it will acquire a snapshot from the target website to use as the image source. If you don't quite understand what I'm saying it is as follows:
I want to create a linked Image
<img src="source">
and I want to use javascript to replace the 'source' with a snapshot of the '#' page.
I would like to use this so that on my website I can link to Youtube videos (using the link in the embed codes) and automatically acquire a thumbnail for the link without any work more than inputting the link/URL.
I am not very javascript savy so any help with that portion will be much appreciated, although I am trying to do this with very minimal Javascript if possible. All answers are much appreciated and if any more information is needed just ask.
If you want to put YouTube screenshot I recommend using jQuery with jYouTube and here how I put it together:
JAVASCRIPT:
// Run when page is load
$(function(){
// Find all <a> inside element with youTube class name
$(".youTube a").each(function(){
// Get reference to found <a> link
var lnk = $(this);
// Get YouTube thumb image for <a>'s href attribute
var url = $.jYoutube(lnk.attr("href"));
// Now update inside image's src attribute with thumbs image
lnk.children('img').attr("src", url);
});
});
HTML
<div class="youTube">
<img src="#" /><br />
<img src="#" /><br />
<img src="#" /><br />
</div>
Also I put it in jsfiddle for easy demo: http://jsfiddle.net/snyew/
I hope this helps :-)
It takes an Image object.
yourImg = document.getElementById("image_id");
var newImg = new Image();
newImg.src = //URL of the image to be acquired
yourImg.src = newImg.src;
Assuming you want to do this for every link with just an image as child, you can do:
$('a').each(function() {
if($(this).children('img').length == 1 && $(this).children().length == 1) {
// get snapshot
var snapshotImgURL = getSnapShotOf($(this).attr('href')); // replace this with your AJAX call to get the snapshot
// set it to the image
$(this).children('img').attr('src', snapshotImgURL);
}
});
The above assumes you are ok with using jQuery on the project.
I'm creating an App using html 5 phonegap and one portion of the App is drawing an rss feed in. One problem i've run into is that the feed has images in it and the url for the images is set to be draw from the server the feed is located on. For example the entire img code is:
<img src="/files/2012/01/brazilsal.jpg" />
Now since those images aren't native it won't work on the app.
So i need to prepend the src to be
<img src="http://management.bu.edu/files/2012/01/brazilsal.jpg" />.
I also need it to not affect any other image on the app.
Any ideas on how to do this in javascript or jquery?
Select the images using the attribute starts with selector [attr^=value], then set it's src value using $.fn.attr.
$('img[src^="/files"]').attr(function(i,src){
return "http://management.bu.edu" + src;
});
You need js-uri.
Simple example:
var rssUri = new URI("http://management.bu.edu/data.rss");
var imgUri = new URI("/files/2012/01/brazilsal.jpg");
var fullImgUri = imgUri.resolve(rssUri);
alert(fullImgUri); // http://management.bu.edu/files/2012/01/brazilsal.jpg