Можно ли изменить изображение src для ввода изображения, щелкнув указанное изображение?

Question

Итак, я просто возился с HTML и Javascript, и мне было интересно, как сделать так, чтобы пользователь нажимал на изображение, а затем это изображение менялось после щелчка. Сначала я думал, что это будет простой вызов функции по клику, например:

HTML:

<input type="image" src="Images/img.png" id="img" onclick="imgChange()">

Javascript:

  function imgChange()
{
  var img = document.getElementById("img");

  img.src="Images/img2.png";

}

Но при выполнении это, похоже, не работает. Какие-либо предложения?

javascript html

0

BoomerBlastoise 17 Янв 2022 в 09:25

2

Вы получаете какие-либо ошибки в консоли? Путь к образу правильный? Код вроде правильный.

–

TechySharnav

17 Янв 2022 в 09:35

Answer 1

Кажется, работает отлично в примере ниже. Я бы посоветовал проверить правильность ссылок на источники изображений, которые вы используете, поскольку это единственное, что я изменил.

  function imgChange() {
    var img = document.getElementById("img");

    img.src = "https://www.tompetty.com/sites/g/files/g2000007521/f/styles/photo-carousel/public/Sample-image10-highres.jpg?itok=TDZEPjP8";

  }

<input type="image" src="https://www.tompetty.com/sites/g/files/g2000007521/f/styles/photo-carousel/public/sample001.jpg?itok=0Riiujkr" id="img" onclick="imgChange()">

0

Developer West 17 Янв 2022 в 09:30

Answer 2

Ваш код работает отлично.

Проверьте местоположение вашего изображения, возможно, есть проблема.

И попробуйте добавить ./ перед адресом изображения ./ означает текущий каталог

Проверьте это здесь Пути к HTML-файлам

Как это :

function imgChange(){
    var img = document.getElementById("img");
    img.src = "./Images/img2.png";
}

И лучший способ сделать это, передав this в функцию. Здесь this — изображение, на которое будет нажат клик.

<input type="image" src="Images/img.png" onclick="imgChange(this)">

function imgChange(img){
   img.src = "./Images/img2.png";
}

0

Dark Rose 17 Янв 2022 в 09:54

Answer 3

Должно работать как есть, но вы можете попробовать передать элемент в функцию.

function imgChange(img){
  img.src = "https://w.wallhaven.cc/full/pk/wallhaven-pkgkkp.png"
}

<img src="https://w.wallhaven.cc/full/rd/wallhaven-rdwjj7.jpg" onclick="imgChange(this)">

0

csaseymour 17 Янв 2022 в 09:34

Answer 4

У меня отлично работает

function imgChange() {
  var img = document.getElementById("img");
  img.src="https://live.staticflickr.com/7166/6621290239_250dce025d_b.jpg";

}

<input type="image" src="https://live.staticflickr.com/7440/8838399307_9e9e9668f6_b.jpg" id="img" onclick="imgChange()">

0

thekingistheruler 17 Янв 2022 в 10:35

Можно ли изменить изображение src для ввода изображения, щелкнув указанное изображение?

4 ответа

Похожие вопросы

Новые вопросы

javascript