单击时如何将我拥有的图像更改为另一个图像？答案

【问题标题】：How can I make the image I have change to another image when clicked on?单击时如何将我拥有的图像更改为另一个图像？
【发布时间】：2015-08-22 05:02:06
【问题描述】：

我尝试使用 JavaScript，但我认为它在错误的位置。到目前为止我所拥有的。

    <!doctype html>
    <html>
    <head>
    <title>Public Vision</title>
    <link rel="stylesheet" type="text/css" title="backbone" href="backbone.css">
    <link rel="alternative stylesheet" type="text/css" title="alt" href="alt.css">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script type="text/javascript" src="script.js"></script>

    </head>
    <body class="style2">
    <div id="header" class="style2"><div id="header2" class="style2">Public Vision</div></div>
    <iframe width="640" height="400" 
    src="https://www.youtube.com/embed/videoseries?list=PLX9_I-EOJPdFuOjcI2zkmTck55homHEBE" 
    frameborder="2" allowfullscreen></iframe>

    <input id="showHideContainer" type="image" src="on.jpg " height="3%" width="2%" alt="On" onclick="toggle();changeImage();">
     <script>
     document.getElementById('showHideContainer').onclick = function () {
divTest = document.getElementById('header');
if (divTest.style.display === "none") {
    divTest.style.display = 'block';
} else {
    divTest.style.display = "none";
};
   function changeImage() {
var image = document.getElementById('showHideContainer');
if (image.src.match("off")) {
    image.src = "on.jpg";
} else {
    image.src = "off.jpeg";
}
 };
$('body').toggleClass('style2');
</script>
</body>
</html>

我认为我将 JavaScript 更改为点击时的图像在错误的位置或设置不正确，任何帮助将不胜感激，或者如果您知道更好的方法来做我想做的事，那就太好了。提前致谢。

这也是我的 CSS：

  #header { height: 15%; width: 100%; background-color: white; z-index: 2; position: fixed; right:0; top:0;


  box-shadow: 0 4px 4px -2px #232323;
 -moz-box-shadow: 0 4px 4px -2px #232323;
 -webkit-box-shadow: 0 4px 4px -2px #232323;
 }   

#header2{height: 15%; width: 100%; position: fixed; color:grey; opacity: 0.6; text-align: center; z-index: 4; font-size: 30px; margin-top: 2.5%; background-color:clear;}
 iframe {display:block; margin: 0 auto; margin-top: 17%;}


 body{
background-color:#404040; z-index:3; transition: background-color 2s; 
 }
 body.style2{
background-color:white; z-index:3;
 }

【问题讨论】：

没有toggle()函数可能报错，无法访问changeImage()函数
如果我删除了 changeImage() 函数，toggle() 函数就可以工作了。
@AustinJones 嘿，我刚刚从查看您的个人资料中注意到您已经接受了几乎所有的答案，但不接受这个问题？连点赞都没有！！！赞成票永远不会误入歧途。不过，接受会很好！谢谢..

标签： javascript html css onclick

【解决方案1】：

http://jsfiddle.net/9jwnoxcr/

先决条件：jQuery

HTML：

<img id="imgTarget" src="http://www.hdwallpapersimages.com/wp-content/uploads/2014/01/Winter-Tiger-Wild-Cat-Images.jpg">

Javascript：

$('#imgTarget').click(function(){
    $('#imgTarget').attr('src', 'http://www.gettyimages.ca/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg');
});

【讨论】：

我是个白痴，抱歉我忘了说我使用的是不是一个简单的标记
愚蠢的问题，但我只是把它扔到我已经拥有的 javascript 中还是启动另一个脚本。感谢您的耐心。
没关系！非常感谢！在旁注中，您知道如何制作它，以便当我再次单击时它会返回到原始图像？

【解决方案2】：

这里：

http://jsfiddle.net/7ypth346/1/

HTML：

<a href="#"></a>

CSS：

a {
     display:block;
     width:600px;
     height:300px;
     background: url(http://www.gettyimages.ca/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg) no-repeat;
}

a:hover {
     background: url(http://www.hdwallpapersimages.com/wp-content/uploads/2014/01/Winter-Tiger-Wild-Cat-Images.jpg) no-repeat;
}

Javascript：

 $('a').click(function(){
     $('a').css('background', 'url(http://blog.jimdo.com/wp-content/uploads/2014/01/tree-247122.jpg) no-repeat');
 });

【讨论】：

我不想更改背景图片。我想更改我正在使用的图片的图像。
在点击事件上，只需执行：$('img').attr('src','newimage.jpg');
好的，我试过了，但还是不行：/不知道为什么。
等一下，我会再做一个回答帖。

【解决方案3】：

假设你有两张图片：img1.jpg 和 img2.jpg 您可以在其 onclick 属性中更改 IMG 的 src 属性

<img src="img1.jpg" onclick="this.src='img2.jpg'"></img>

【讨论】：

【解决方案4】：

使用函数.click jquery

https://jsfiddle.net/f36pzdx1/2/

例子：

var checkon=0;


$('.btn').click(function(){
    if(checkon == 0){
        $('.btn').removeClass('off');
        $('.btn').addClass('on');
        checkon = 1;
    }
    else{
        $('.btn').removeClass('on');
    	$('.btn').addClass('off');
        checkon = 0;
    }
});

.btn{
    width:100px;
    height:100px;
    cursor:pointer;
     background: url('http://qph.is.quoracdn.net/main-qimg-4eccf133ec34afe579f9534b992ff6ed?convert_to_webp=true');
    background-size:100%;
}
.off{
    background: url('http://www.hardwaresecrets.com/wp-content/uploads/IEC5009_Standby_Symbol.svg_.png');
    background-size:100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn"></div>

我希望这会有所帮助。 o/

【讨论】：

【解决方案5】：

在这里，您必须包含内联脚本，否则它在 fiddle. 中不起作用

<script>
    function changeImage() {
    var image = document.getElementById('myImage');
    if (image.src.match("http://www.rachelgallen.com/images/stop.png")) {
        image.src = "http://www.rachelgallen.com/images/play.png";
    } else {
        image.src = "http://www.rachelgallen.com/images/stop.png";
    }
}
</script>
<img id="myImage" onclick="changeImage()" src="http://www.rachelgallen.com/images/stop.png" width="100" height="100">

【讨论】：