Is there a way to change an source's extension explicitly using JS?

Question

Beginner here. I have a series of HTML IMG elements that look like this:

<img src="1.png" onclick="changeImg(this)">
<img src="2.png" onclick="changeImg(this)">
<img src="3.png" onclick="changeImg(this)">

What I would like the "changeImg" JS function to do is, on click, change the image source from "1.png" to "1.gif". Essentially, just changing the last 3 letters of the img source.

The purpose of this is to allow users to click on an element in order to play an animated GIF. As such, "1.png" is simply a static PNG version of the animated "1.gif". Can this be done?

I've been googling and stuck for a while now, because all the solutions I can find merely substitute a new IMG src, not alter it. I want to be able to do more than that. This is not a very constructive or helpful comment. — Chris, Oct 22 '20 at 06:50

score 1 · Accepted Answer · answered Oct 22 '20 at 06:48

1

Use img.src:

function changeImg(img) {
  img.src = img.src.replace('png', 'gif');
}

<img src="1.png" onclick="changeImg(this)">

answered Oct 22 '20 at 06:48

benhatsor

1,863
6
20

that's brilliant. I didn't know that's something you could do, thank you very much. I will remember this tip. – Chris Oct 22 '20 at 06:52
Happy to help. Also, could you pick my answer above? – benhatsor Oct 22 '20 at 06:52
A little sidenote: it would be more stable to replace `.png` with `.gif`. – Lain Oct 22 '20 at 07:40

贝克街的天才 · Answer 2 · 2020-10-22T07:07:45.197

// this is jquery code
// In this way, no matter what your src suffix is, it can be changed to gif
function changeImg(obj){
    var nowSrc = $(obj).attr("src");
    var srcName = nowSrc.split(".");
    $(obj).attr("src",srcName[0]+".gif");
}

But why is it so troublesome? Is it not good to directly change src to 1.gif?

Because the sports picture does not have to have the same name as the static picture, what if the sports picture is 1.jpg and the sports picture is 2.gif?

This should be better. When generating the page, directly generate the img tag into the following form:

<img src = "Static image URL from server" onclick = "changeImg(this, "Dynamic image URL from server")">
<img src = "Static image URL from server" onclick = "changeImg(this, "Dynamic image URL from server")">
<img src = "Static image URL from server" onclick = "changeImg(this, "Dynamic image URL from server")">

// this is jquery code
function changeImg(obj, url){
    $(obj).attr("src", url);
}

In this way, the names of the two pictures do not have to be the same, which is more flexible

Is there a way to change an source's extension explicitly using JS?

2 Answers2