If there is HTML code like below
<img src="https://example.com/img_01.png">
<img src="https://example.com/img_02.png">
<img src="https://example.com/img_03.png">
<img src="https://example.com/img_04.png">
I'd like to change these like:
<img src="https://example2.com/img_01.png">
<img src="https://example2.com/img_02.png">
<img src="https://example2.com/img_03.png">
<img src="https://example2.com/img_04.png">
How can I make this?
You can use replace to change url inside loop to get new url like below.
$('img').each(function() {
var newSrc = $(this).attr('src');
newSrc = newSrc.replace('example', 'example2')
$(this).attr('src', newSrc);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img src="https://example.com/img_01.png" />
<img src="https://example.com/img_02.png" />
<img src="https://example.com/img_03.png" />
<img src="https://example.com/img_04.png" />
You can use .attr()
$('img').attr('src',"https://example2.com/img_01.png");
console.log(Array.from(document.querySelectorAll('img')))
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img src="https://example.com/img_01.png">
<img src="https://example.com/img_02.png">
<img src="https://example.com/img_03.png">
<img src="https://example.com/img_04.png">
You can make this with jQuery:
<img src="https://example.com/img_01.png">
<img src="https://example.com/img_02.png">
<img src="https://example.com/img_03.png">
<img src="https://example.com/img_04.png">
JavaScript code:
$("img").each(img => img.src.replace("example.com", "example2.com"));
You can try like this
var newDOmain = "https://example2.com/";
$('img').each(function(){
var imgName = $(this).attr('src').split('/').pop();
$(this).attr('src', newDOmain + imgName);
$(this).attr('alt', newDOmain + imgName);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img src="https://example.com/img_01.png">
<img src="https://example.com/img_02.png">
<img src="https://example.com/img_03.png">
<img src="https://example.com/img_04.png">
if some day ur url changes to "https://example.net/img_01.png" then u have to modify the code if u will use direct string replacements. So to make ur code more efficient use regex way to do the same.
var domainRegex = /\/{2,}((?:[^\.]+\.)*\w+)\//;
$("img").each(img => {
img.src = img.src.replace(img.src.match(domainRegex)[1], "example2.com");
});
This regex can replace any domain name to ur chosen one.
Related
I want to display an image on screen, but define the link to the image in my js script, like so:
<script>
function myFunction() {
var imgUrl = "https://www.linkpicture.com/q/IMG_4902"
var modelName = "Model Name"
document.getElementById("myText").innerHTML = modelName;
}
</script>
<body onload="myFunction()">
<div class="image-area">
<div class="img-wrapper">
<img src="" id="myImg" alt="">
so in the img src, I want to display the image based on the imgUrl content in my script. How is this possible?
You can modify the source of the image by assigning a new value to the src property.
<script>
function myFunction() {
var imgUrl = "https://www.gravatar.com/avatar/0fdacb141bca7fa57c392b5f03872176?s=48&d=identicon&r=PG&f=1"
var modelName = "Model Name"
// document.getElementById("myText").innerHTML = modelName;
document.getElementById("myImg").src = imgUrl;
}
</script>
<body onload="myFunction()">
<div class="image-area">
<div class="img-wrapper">
<img src="" id="myImg" alt="">
</div>
</div>
</body>
Very strange question...this doesn't work for some reason?
document.getElemetnById("myImg").src = imgUrl;
You can do something like this
let myImg=document.querySelector('#myImg');
let imgUrl = "https://www.linkpicture.com/q/IMG_4902";
myImg.src=imgUrl
I Hope you can help me.
When I click button it adds night before file extension ex.(interior-1.jpg to interior-1-night) but it only affects the first image which is interior-1.jpg.
What I want is to add "night" text before the file extension of all images under the "image" ID.
Here is my html code
<button onclick="changeMode()">switch</button>
<img id="image" src="interior-1.jpg"/>
<img id="image" src="interior-2.jpg"/>
<img id="image" src="interior-3.jpg"/>
<img id="image" src="interior-4.jpg"/>
<img id="image" src="interior-5.jpg"/>
Here is my javascript code
<script>
function changeMode() {
var filename = document.getElementById("image").src;
var modfilename = filename.replace(/(\.[\w\d_-]+)$/i, '-night$1');
document.getElementById("image").src = modfilename;
</script>
}
You should never use same id name on elements in the dom. Instead use same class name. To apply the src on all the img tag get all the tags using document.getElementsByClassName. Iterate over each element and change the src using a forEach loop
function changeMode() {
var filename = document.getElementsByClassName("image");
var a = '';
Object.values(filename).forEach((e) => {
a = e.src;
var modfilename = a.replace(/(\.[\w\d_-]+)$/i, '-night$1');
e.src = modfilename;
})
}
<button onclick="changeMode()">switch</button>
<img class="image" src="interior-1.jpg" />
<img class="image" src="interior-2.jpg" />
<img class="image" src="interior-3.jpg" />
<img class="image" src="interior-4.jpg" />
<img class="image" src="interior-5.jpg" />
The problem is that you are getting your element by GetElementById which only returns one element. You should change the id tag to name like this:
<img name="image" src="interior-1.jpg"/>
Then you should be able to retrieve all the elements using var els = document.getElementsByName('image');
now you need to change their file names, so
for (let i = 0; i<els.length; i++){
els[i].src = els[i].src.replace(/(\.[\w\d_-]+)$/i, '-night$1');
}
Here is my two cents. Use classes. This way you can query multiple elements instead of just one. Then apply your changes to each element using, in this case, a forEach.
The elements returend from document.querySelectorAll is a nodeList. That's why I use Array.prototype.forEach.call.
function changeMode() {
const imageNodes = document.querySelectorAll(".image");
Array.prototype.forEach.call(imageNodes, (node) => {
let modfilename = node.src.replace(/(\.[\w\d_-]+)$/i, '-night$1');
node.src = modfilename
})
}
<button onclick="changeMode()">switch</button>
<img class="image" src="interior-1.jpg"/>
<img class="image" src="interior-2.jpg"/>
<img class="image" src="interior-3.jpg"/>
<img class="image" src="interior-4.jpg"/>
<img class="image" src="interior-5.jpg"/>
How do I have JavaScript telling me the current image name with an ONCLICK event... and I need to do this with alert() for some reasons.
function imgName() {
window.alert()
}
HTML
<figure>
<img src="aster.jpg" alt="aster" onclick="window.alert()">
<figcaption><span>I am aster</span></figcaption>
</figure>
Thanks
Giving an id to image for query from js code.
and just writing:
alert(document.querySelector('#imageId').alt) //supposed alt as name.
Change:
onclick="window.alert()"
to:
onclick="imgName(this)"
and within your imgName function change:
window.alert()
to
alert(foo.src)
where foo is the argument you pass to the function via function imgName(foo)
function imgName(foo) {
alert(foo.src)
}
<figure>
<img src="aster.jpg" alt="aster" onclick="imgName(this)">
<figcaption><span>I am aster</span></figcaption>
</figure>
Or you could just ditch the function and alert the src directly via:
<figure>
<img src="aster.jpg" alt="aster" onclick="alert(this.src)">
<figcaption><span>I am aster</span></figcaption>
</figure>
Please see below -
<html>
<body>
<script language="javascript" >
function imgName() {
var fullPath = document.getElementById("img1").src;
window.alert(fullPath)
}
</script>
<img src="aster.jpg" alt="aster" id="img1" onClick="imgName()">
</form>
</body>
</html>
In "onclick" you are not calling the function "imgName()".
Do this:
<figure>
<img src="aster.jpg" alt="aster" onclick="imgName()">
<figcaption><span>I am aster</span></figcaption>
</figure>
If "current image name" means that you want the alt attribute ("aster"), the code of function need to be this:
function imgName() {
var nameOfPics = document.getElementsByTagName("img")[0].getAttribute("alt");
alert(nameOfPics);
}
The problems is when you click the image, you didn't call the related function.
Change onclick="window.alert()" with the related function to return window alert.
<img src="aster.jpg" alt="aster" onclick="window.alert()">
Change with :
<img src="aster.jpg" alt="aster" onclick="imgName()">
I Hope its can help you, pardon me if this is not the best answer
I have the following elements in a html document
<div id="u11" class="ax_default image" data-label="image1">
<img id="u11_img" class="img " src="images/image1_u11.png">
</div>
<div id="u23" class="ax_default image" data-label="image2">
<img id="u23_img" class="img " src="images/image2_u23.png">
</div>
I want to write a javascript onclick function for another element that set image2 src to image1 src
The problem is that ids are random so I cannot use them but fortunately I can use the data-label to get the external div objects with $('[data-label=image1]')
¿How can I set the src in the inner img?
You can use the following
var image1 = document.querySelector('[data-label="image1"] img'),
image2 = document.querySelector('[data-label="image2"] img');
document.querySelector('#button').addEventListener('click', function(){
image2.src = image1.src;
});
here is an example using each function :
$( "#change" ).click(function() {
// get all image element in body
var selects = $('body').find('img');
// loop throw them
selects.each(function(index, el) {
if(index !== selects.length - 1) {
//save the img src to local variable
var img1 = selects[index].getAttribute('src');
var img2 = selects[index+1].getAttribute('src');
// change the imgs src
selects[index].src = img2;
selects[index+1].src = img1;
// and have a nice day ^^'
}
});
});
img{
max-width:95px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div id="u11" class="ax_default image" data-label="image1">
<img id="u11_img" class="img " src="https://media-cdn.tripadvisor.com/media/photo-s/0e/4c/55/8d/merzouga.jpg">
</div>
<div id="u23" class="ax_default image" data-label="image2">
<img id="u23_img" class="img " src="http://www.classetouriste.be/wp-content/uploads/2012/11/sahara-01.jpg">
</div>
<button id="change">Change images</button>
this code will work no matter how many img you have in your body or you can just set the element that contain the image var selects $('#yourelementid').find('img');
You could change the entire code with the src included.
function myFunction() {
document.getElementById("u11").innerHTML = '<img id="u23_img" class="img " src="images/image2_u23.png">';
}
}
<div id="u11" class="ax_default image" data-label="image1">
<img id="u11_img" class="img " src="images/image1_u11.png">
</div>
<div id="u23" class="ax_default image" data-label="image2">
<img id="u23_img" class="img " src="images/image2_u23.png">
</div>
I have following html code.
<div id="polaroid">
<figure>
<img src="assets/polaroid01.jpg" width="200" height="200" alt="Red mushroom" />
<figcaption>Pretty red mushroom</figcaption>
</figure>
<figure>
<img src="assets/polaroid02.jpg" width="200" height="200" alt="Rainbow near Keswick" />
<figcaption>Rainbow near Keswick</figcaption>
</figure>
<figure>
<img src="assets/polaroid03.jpg" width="200" height="200" alt="An old tree" />
<figcaption>Nice old tree</figcaption>
</figure>
</div><!--end polaroid-->
In this i want to store all the image tags in an array. I know, I can access the figure tags like this.
var images= document.getElementById('gall').getElementsByTagName('figure');
But i don't know how to access the image tag.
I tried this.
document.getElementById('gall').getElementsByTagName('figure').getElementsByTagName('img');
But this doesn't work.
In this case it's more convenient to use querySelectorAll:
var images = document.querySelectorAll('#gall figure img');
You mean like this:
var images= document.getElementById('gall').getElementsByTagName('figure');
images.getElementsByTagName("img");
This is possible if you use JQuery. Simply Do This.
Include Jquery Library (any version).
select image : $("#polaroid img").(any action);
Example:
put this above your code:
<script src="../js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#polaroid img").css("border", "1px solid #000000");
});
</script>