We Keep Coding

Image that changes to another image when the mouse is placed over it

I try that when the mouse hovers over the image, this image changes to another one.
Why dont work?
var img1 = document.getElementById("img1");
function cambiaImagen() {
img1.style.backgroundImage = "url('demo1.jpg')";
}
img1.addEventListener("onmouseenter", cambiaImagen, true);
<div class="imagenes">
<img id="img1" class="img-fluid" src="demo1p.jpg" alt="">
<img id="img2" class="img-fluid" src="demo2p.jpg" alt="">
<img id="img3" class="img-fluid" src="demo3p.jpg" alt="">
</div>

There are actually two core issues in your code:
in order to replace the current image with another one its enough to replace the path to it, the one, that is stored within src attribute
"mouseenter" event should be called instead of "onmouseenter"
here is the working example:
var img1 = document.getElementById("img1");
function cambiaImagen() {
img1.src = "https://via.placeholder.com/150/000000/FFFFFF/?text=REPLACEMENT";
}
img1.addEventListener("mouseenter", cambiaImagen);
<div class="imagenes">
<img id="img1" class="img-fluid" width="150" height="150" src="https://via.placeholder.com/150/0000FF/808080/?text=ONE" alt="">
<img id="img2" class="img-fluid" width="150" height="150" src="https://via.placeholder.com/150/FF0000/FFFFFF/?text=TWO" alt="">
<img id="img3" class="img-fluid" width="150" height="150" src="https://via.placeholder.com/150/FFFF00/000000/?text=THREE" alt="">
</div>

When using addEventListener you should use the event mouseenter instead of onmouseenter.

why don't you just change the src?
var img1 = document.getElementById("img1");
var origSrc=img1.src;
function cambiaImagen(){
img1.src = "demo1.jpg";
}
img1.addEventListener("mouseenter", cambiaImagen, true);
img1.addEventListener("mouseleave",()=>{img1.src=origSrc},true);

How to replace img tag with attribute and specific class only

I'm newbie in javascript and looking for some regex or way which can replace image tag with their attributes.
Image tag can be multiple without any unique id and I want to replace only those image tags which have particular class.
For example I've string like :
var str = 'hi <img dataattr1="att1" src="abc" class="img specificclass" dataattr2="att2" dataattr3="att3" /> <img dataattr1="newatt1" src="abc" class="img specificclass" dataattr2="newatt2" dataattr3="newatt3" /> some more tag <img dataattr1="moreatt1" src="abc" class="img specificclass" dataattr2="moreatt2" dataattr3="moreatt3" /> <img dataattr2="noreplace" src="abc" class="img" /> end';
so its output should be like this :
hi :::att2::: :::newatt2::: some more tag :::moreatt2::: <img data-attr1="noreplace" src="abc" class="img" /> end
What I tried till now is :
var str = 'hi <img dataattr1="att1" src="abc" class="img specificclass" dataattr2="att2" dataattr3="att3" /> <img dataattr1="newatt1" src="abc" class="img specificclass" dataattr2="newatt2" dataattr3="newatt3" /> some more tag <img dataattr1="moreatt1" src="abc" class="img specificclass" dataattr2="moreatt2" dataattr3="moreatt3" /> <img dataattr2="noreplace" src="abc" class="img" /> end';
var rgx = /<img[^>]*class="specificclass"[^>]*>/;
var regex = /<img.*?dataattr2='(.*?)'/;
var src = regex.exec(str)[1]
str = str.replace(rgx,src);
console.log(str);
but its giving an error and I'm not if its even right way to do it or not

I wouldn't use regex for this, it's famously brittle and problematic for non-regular texts like HTML.
Instead, I'd use the DOM parser built into the browser (you've tagged jQuery, so I'm assuming you're doing this on a browser or in another environment with a DOM):
var str = 'hi <img dataattr1="att1" src="abc" class="img specificclass" dataattr2="att2" dataattr3="att3" /> <img dataattr1="newatt1" src="abc" class="img specificclass" dataattr2="newatt2" dataattr3="newatt3" /> some more tag <img dataattr1="moreatt1" src="abc" class="img specificclass" dataattr2="moreatt2" dataattr3="moreatt3" /> <img dataattr2="noreplace" src="abc" class="img" /> end';
// Parse it and wrap it in a div
var frag = $("<div>").append($.parseHTML(str));
// Find the relevant images
frag.find("img.specificclass[dataattr2]").each(function() {
// Replace the image with a text node containing :::[dataattr2]:::
var $this = $(this);
$this.replaceWith(document.createTextNode(":::" + $this.attr("dataattr2") + ":::"));
});
// Get the HTML of the result
var str = frag.html();
console.log(str);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Change img src when clicked jquery [duplicate]

This question already has answers here:
change img src on click
(5 answers)
Closed 4 years ago.
I have some HTML code:
<div class="text-center img-big">
<!-- IMAGE BIG -->
<img class="img-fluid img-big" src="" alt="">
</div>
<!-- IMAGE SMALL -->
<a id="getImg" href="" ><img src="img/asus.jpg" alt="" class="img-thumbnail thumb-product img-fluid thumb-first" width="100"></a>
<a id="getImg" href="" ><img src="img/asus-thumb.jpg" alt="" class="img-thumbnail thumb-product img-fluid" width="100"></a>
<img src="img/asus.jpg" alt="" class="img-thumbnail thumb-product img-fluid" width="100">
and this is my some jquery code :
<script type="text/javascript">
var imgSrc = $(".thumb-first").attr("src");
$(".img-big").attr("src",imgSrc);
$("#getImg img").on("click",function(){
tes = $(this).attr("src");
$(".img-big").attr("src",imgSrc);
});
</script>
I want to change src image big when image small clicked, but my code doesn't work properly.

What I did is to change id="getImg" to class="getImg" because id attribute should always be unique.
Instead of getting the click event of the image, I used the click event of <a>, then located the <img> using find().
I also added an id to the big image, because there are two instance of .img-big, which is an <img> and <div>, and <div> does not have a src attribute.
Lastly, I used e.preventDefault() to prevent the redirection when clicking a <a> tag
$(".getImg").click(function(e) {
var imgSrc = $(this).find("img").attr("src");
$("#bigImage").attr("src", imgSrc);
e.preventDefault();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="text-center img-big">
<!-- IMAGE BIG -->
<img id="bigImage" class="img-fluid img-big" src="" alt="">
</div>
<!-- IMAGE SMALL -->
<a class="getImg" href=""><img src="http://via.placeholder.com/100x100" alt="" class="img-thumbnail thumb-product img-fluid thumb-first" width="100"></a>
<a class="getImg" href=""><img src="http://via.placeholder.com/200x200" alt="" class="img-thumbnail thumb-product img-fluid" width="100"></a>

First, you have multiple elements with the same id attribute.
Second, tes variable here is not defined.
tes = $(this).attr("src");
Third, try placing your javascript at the bottom of the html page or place your javascript code inside the ready function:
$(document).ready(function(){
});

You don't need to give getImg, it can be done through onclick function. Try my code.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="text-center img-big">
<!-- IMAGE BIG -->
<img class="img-fluid img-big" src="" alt="">
</div>
<!-- IMAGE SMALL -->
<script>
function change_img(param){
var src = $(param).prop('src');
$('.img-big').prop('src',src);
}
</script>

Is it possible to extract image from text with jQuery or JavaScript?

Good day, I'm trying to make an article content with ckeditor. Here is an example from my input.
<p>I have two images <img alt="" src="http://localhost:84/lf//assets/images/commingsoon.png" style="height:225px; width:225px" /> and this <img alt="" src="http://localhost:84/lf//assets/images/article2.jpg" style="height:91px; width:122px" /></p>
As you can see there are two images, and i want to the first image as my thumbnail. for now, i just want to extract it .
The result from extract is something like this
http://localhost:84/lf//assets/images/commingsoon.png
var myString = '<p>I have two images <img alt="" src="http://localhost:84/lf//assets/images/commingsoon.png" style="height:225px; width:225px" /> and this <img alt="" src="http://localhost:84/lf//assets/images/article2.jpg" style="height:91px; width:122px" /></p>';
var result = (someprosess)

You can use find(), first() and attr() to access the URL of the first image from your string.
var myString = '<p>I have two images <img alt="" src="http://localhost:84/lf//assets/images/commingsoon.png" style="height:225px; width:225px" /> and this <img alt="" src="http://localhost:84/lf//assets/images/article2.jpg" style="height:91px; width:122px" /></p>';
var result = $(myString).find('img').first().attr('src');
console.log(result);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

You can use either JavaScript or jQuery to search for the first instance of an image and parse out its src
As an example, using jQuery (if there is always going to be an image in the content)
var imgPointer = $('body').find('img');
var imgSrc = imgPointer[0].attr('src');

Here you go with a solution using jQuery
console.log($('p').find('img:first').attr('src'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>I have two images <img alt="" src="http://localhost:84/lf//assets/images/commingsoon.png" style="height:225px; width:225px" /> and this <img alt="" src="http://localhost:84/lf//assets/images/article2.jpg" style="height:91px; width:122px" /></p>
Hope this will help you.

Javascript to loop / increment html code with values up to 55

I need to create a list of links in a static (.html) page automatically, is there a way of doing this using JavaScript. I tired a few scripts but couldn't work it out.
this is my html...
<img src="images/1.jpg" width="119" height="121" alt="" />
and this is what i want the script to generate 55 times...
<img src="images/1.jpg" width="119" height="121" alt="" />
<img src="images/2.jpg" width="119" height="121" alt="" />
<img src="images/3.jpg" width="119" height="121" alt="" />
... and so on, call me lazy but any help would be most appreciated :)

This should do the trick:
<div id="links">
</div>
<script>
var strLinks = '';
for (var i = 1; i <= 55; i++) {
strLinks += '<img src="images/'+ i +'.jpg" width="119" height="121" alt="" />';
}
document.getElementById("links").innerHTML = strLinks;
</script>
JS Fiddle example: http://jsfiddle.net/RWUdG/2/
EDIT: Oops, missed a quote. Fixed.

This could also work.
<div id="imgs">
</div>
<script>
var i = 55; while (i--) {document.getElementById("imgs").innerHTML += '<img src="images/'+ i +'.jpg" width="119" height="121" alt="" />';}
</script>
http://jsfiddle.net/T2c3G/

If your anchor tags are contained inside a div, you can do this:
$(document).ready(function(){
var linksHtml = "";
for(var i = 1; i <= 55; i++){
linksHtml += '<img src="images/'+(i)+'.jpg" width="119" height="121" alt="" />';
}
$("#linksDiv").html(linksHtml);
});