开发者

Javascript simple onclick image swap

I am trying to use Javascript to swap an image, so far I can get it from A to B, but not back.

Here is what I'm using to create one swap:

<img src="pic1.png" name="pic" onclick="window.document.pic.src='pic2.png';"/>

This swaps image 1 to image 2, simple enough. But I w开发者_Python百科ant to be able to revert back to image 1 by clicking on the new image 2. I tried using this:

<img src="pic1.png" name="pic" onclick="
if (window.document.pic.src='pic1.png'){
window.document.pic.src='pic2.png';
} 
else if (window.document.pic.src='pic2.png'){
window.document.pic.src='pic1.png';
}"/>

It doesn't seem to work in this instance. It will switch to pic2, but not switch back to pic1. Is it something to do with onclick? My if statements? Thanks


Try this simple trick... easy to maintain.

<script>
var onImg= "on.jpg";
var offImg= "off.jpg";
</script>
<img src="on.jpg" onclick="this.src = this.src == offImg ? onImg : offImg;"/>


In your code the problem is when you alert window.document.pic.src its print like http://localhost/pic1.png and then you are are use condition if (window.document.pic.src == 'pic1.png') how is it true. try this

<script type="text/javascript">
function test()
{
    alert(window.document.pic.src);
     //alert msg print like http://localhost/test/pic1.png
    if (document.pic.src=='http://localhost/test/pic1.png'){

document.pic.src='pic2.png';
} 
else if (document.pic.src=='http://localhost/test/pic2.png'){

document.pic.src='pic1.png';
}
}
</script>
<img src="pic1.png" name="pic" onclick="test()"/>


wrong use of == in if condition

if (window.document.pic.src == 'pic1.png'){
window.document.pic.src='pic2.png';
} 
else if (window.document.pic.src =='pic2.png'){
window.document.pic.src='pic1.png';
}"/>


  1. window.document.pic.src='pic1.png' assigns pic1.png to the left hand side. It does NOT compare.

  2. Though not directly relevant, try not to access elements by their name globally. Use their id.

  3. Your javascript should not be inside the onclick. It should be inside a javasctipt function

Combined:

The img tag:

<img src="pic1.png" name="pic" id="pic" onclick="swap()"/>

The javascript

<script>
function swap()
{
   if (document.getElementById("pic").src.endsWith('pic1.png') != -1)  //==:Comparison
   { 
      document.getElementById("pic").src = "pic2.png"; //=:assignment   
   } 
   else if (window.document.pic.src.endsWith('pic2.png') != -1) 
   { 
      document.getElementById("pic").src = "pic1.png"; 
   }
}
</script>


Your code is doing what the below lines do, it's not going inside an if else block, so if you remove your if else block the code still will work, because on mouse click it sets the value of src as 'pic2.png', which was 'pic1.png' earlier, and when you click again because it's already pic2.png so it remains the same.

<html>
<head>
<script type="text/javascript">

function swap() {
    window.document.pic.src='pic2.png';
}
</script>

</head>
<body>
<img src="pic1.png" name="pic" onclick="swap()"> 
</body>
</html>


You can try this.

<html>
<head>
<title>Swapping Images</title>
</head>
<body>
<img id="myimg" src="img1.jpg" hieght="300" width="300" onClick="change ()"/>
</body>
</html>
<html>
<head>
<script>
function change () {
  var img=document.getElementById("myimg");
  if (img.src === "img1")
    img.src="img2.jpg";
  else 
    img.src="img1.jpg";
}
</script>
</head>
</html>
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜