Develop Reference

How can I change img src's doamin?

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.

changing background image when onmouseover [duplicate]

This question already has answers here:
Programmatically change the src of an img tag
(9 answers)
Closed 5 years ago.
function change(ele) {
document.getElementById('info').innerHTML = ele.alt;
document.getElementById('info').style.backgroundImage = "url(ele.src)";
}
<div id='info'>
This will tell you more about the below image
</div>
<div id='container'>
<div>
<img alt="The mini Barbarian" src="img\barbarian-thumb.jpg" class="pics" onmouseover="change(this)">
</div>
</div>
how do i change the background image of div with id info with the image on which the mouse hover that image is in div tag with id conatiner

please see this. Basically you can bind function inline with html. Or you can bind it dynamically. This is very simple solution. If your image path is fixed.
<script type="text/javascript">
function mouseaway(my_image) {
my_image.src = "someimage.jpg";
}
function rollover(my_image) {
my_image.src = "someimage2.jpg";
}
</script>
<img src="someimage3.jpg" onmouseover="rollover(this)" onmouseout="mouseaway(this)" />

Just assign an id to your image tag and change the image src like this.
function mouseOverImage() {
document.getElementById("img").src = "images/foo.png";
}
<img
id="img"
alt="some description/info"
src="images/blue.png"
onmouseover = "mouseOverImage()"
/>

Hope this will help
$(document).ready(function(){
$("img").hover(function(){
$(this).attr('src', 'images/alt/imagename.jpg');
});
});

Try this:
function change(e){
document.getElementById("info").style.backgroundImage = "url('"+e.src+"')";
document.getElementById("info").style.backgroundRepeat="no-repeat";
}
function change2(e){
document.getElementById("info").style.backgroundImage = "";
}
#info{
height:100px;
}
<div id='info'>
This will tell you more about the below image
</div>
<div id='container'>
<div>
<img alt="The mini Barbarian" src = "data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2264%22%20height%3D%2264%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2064%2064%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_1614068cdea%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A10pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_1614068cdea%22%3E%3Crect%20width%3D%2264%22%20height%3D%2264%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%2213.84375%22%20y%3D%2236.5%22%3E64x64%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" class="pics" onmouseover="change(this)" onmouseout="change2(this)">
</div>
</div>

Set src attribute of img tag with javascript

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>

Assign img' src dynamically

The page will display an image's url text correctly. But I am not sure how to assign the message to the img 's src to display the image.
<DIV class="msgStyle1" id="message">Waiting for image</DIV>
<div class="imgStyle1" id="message">
<img src=whatneedtogohere /></div>
function displayText(text) {
console.log(text);
document.getElementById("message").innerHTML=text;
window.castReceiverManager.setApplicationState(text);
};

Fixed HTML (switched classes and IDs to make IDs unique) and added an image ID for simplicity:
<div id="msgStyle1" class="message">Waiting for image</div>
<div id="imgStyle1" class="message">
<img src="" id="image" />
</div>
JS:
document.getElementById('image').src = 'http://yourImagePathHere';
See it work here: http://jsfiddle.net/N3rCm/

First off, you shouldn't have multiple Id's on the page, it'll mess with your JS.
Next I would give your image a class if you can
//jquery example of what you would do
var imgSrc = 'http://wherever/youre/getting/this/from';
$('.myimageclass').attr('src', imgSrc);
//non jquery
var myImg = document.getElementsByClassName('myimageclass')[0]; //assuming it's the first one
//or if you can uniquely identify it
var myImg = document.getElementById('imgId');
myImg.src = imgSrc;

Issue in js onmouseover to change pictures.

I use this code to make a onmouseover change pictures. but in IE it works, in firefox it shows wrong, where is the problem? And can anyone add a onmouseout function that return to the first picture for me? Thanks.
<script type="text/javascript">
function changeimage(rel){
document.getElementById("image").src=rel;
}
</script>
<img src="img1.jpg" id="image" />
<a onmouseover="changeimage('img1.jpg')" rel="img1.jpg">img1</a>
<a onmouseover="changeimage('img2.jpg')" rel="img2.jpg">img2</a>
<a onmouseover="changeimage('img3.jpg')" rel="img3.jpg">img3</a>

you can use:
<script type="text/javascript">
function changeimage(rel)
{
var img = document.getElementById("image");
img.setAttribute("orig", img.src);
img.src=rel;
}
function SetOriginal()
{
var img = document.getElementById("image");
img.src = img.getAttribute("orig");
}
</script>
<img src="img1" id="image" />
<a onmouseover="changeimage('img1')" onmouseout="SetOriginal()" rel="img1">img1</a>
<a onmouseover="changeimage('img2')" onmouseout="SetOriginal()" rel="img2">img2</a>
<a onmouseover="changeimage('img3')" onmouseout="SetOriginal()" rel="img3">img3</a>
to return to the original image.
I tested this on firefox(3.6.12) and it is working