主页 / 问题 / 758775
Accepted
Vaagn Akopyan
Asked:2020-12-15 20:54:31 +0000 UTC2020-12-15 20:54:31 +0000 UTC

当我点击它时，我希望图像发生变化。

  • 772

你好！js文件中应该写什么代码，这样当你点击hello.png图片时，图片会变成world.png（和hello.png在同一个文件夹下）。需要再次点击时，图片返回hello.png。

function oClick(e) {
  var element = document.getElementById("f2");
  if (element.style.backgroundImage) {
    element.style.backgroundImage = null; // clean up for next click
  } else {
    element.style.backgroundImage = "url('img/hell.jpg')"; // set new value
  }
}
<img src="pic/hello.png" id="myPic">

我尝试了类似这个功能的东西，但是我的图片消失了，当我再次点击它时没有任何反应。

javascript

3 个回答

  1. var img = document.getElementById("myPic");
    
img.onclick = function(event){
  var target = event.target;
  if (target.className == "hello") {
    target.src = "https://via.placeholder.com/250/?text=world";
    target.className = "world";
  } else if(target.className == "world") {
    target.src = "https://via.placeholder.com/250/?text=Hello";
    target.className = "hello";
  } 
}
    <img class="hello" src="https://via.placeholder.com/250/?text=Hello"  id="myPic">

    在运行代码之前，给图片添加一个类hello

    • 2
  2. Best Answer

    var foto = ['https://cdn.wallaps.com/wallpapers/10000/2870.jpg',
  'http://fnips.ru/wall/7/leopard_trava_bezhat_bolshaya_koshka_1920x1200.jpg'
]
document.querySelector('img').src = foto[0];
document.querySelector('img').addEventListener('click', function() {
  if (this.src == foto[1]) {
    this.src = foto[0];
  } else {
    this.src = foto[1];
  }
})
    img {
  width: 170px;
  height: 100px;
}
    <img src="">

    • 2

  3. 您的代码包含将背景设置img为已呈现图像的元素的图像的逻辑。这样，您的背景图像将位于现有图像之下。

    要更改背景，您需要使用不使用 img 元素的方法。创建div一个，用css编写，background-image点击后用js修改。

    请看下面的代码示例。

    var firstBgImage = 'http://via.placeholder.com/100x100/ff0000';
var secondBgImage = 'http://via.placeholder.com/100x100/00ffff';
var firstBgImageUrl = 'url("' + firstBgImage + '")';
var secondBgImageUrl = 'url("' + secondBgImage + '")';

function clickOnDiv(e) {
  if (e.style.backgroundImage == firstBgImageUrl)
    e.style.backgroundImage = secondBgImageUrl;
  else
    e.style.backgroundImage = firstBgImageUrl;
}
    #myPic {
  width: 100px;
  height: 100px;
  background-image: url("http://via.placeholder.com/100x100/ff0000");
}
    <html>
    <head></head> 
    <body>
      <div id="myPic" onclick="clickOnDiv(this)"></div>
    </body>
</html>

    • 1

相关问题