Question

我尝试使用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改成图像点击错误的地方或者设置不正确，任何帮助都会受到赞赏，或者如果你知道一个更好的方法来做我想要的那就是＆＃39; d大。提前谢谢。

这也是我的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;
 }

Answer 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');
});

Answer 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');
 });

Answer 3

假设你有两张图片：img1.jpg和img2.jpg 您可以在其onclick属性

中更改IMG的src属性

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

Answer 4

使用功能.click jquery

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

示例：

＆＃13;

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;
    }
});

＆＃13;

.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%;
}

＆＃13;

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

＆＃13;

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

Answer 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">

如何在点击时将图像更改为其他图像？

5 个答案: