Question

我有一个图像，当点击隐藏的内容时，它会切换到不同的图像，再次点击它会恢复到正常状态。我正在使用我在这个网站上找到的一些代码并且效果很好。我想在图像中添加翻转。我很难知道如何做到这一点，因为我不是很精通javascript。任何帮助表示赞赏。

<head>
<script language="javascript" type="text/javascript">
var imageNo = 2;
function swapImage() {
image = document.getElementById('image')
switch (imageNo) {
 case 1:
   image.src = "images/img.png"
   imageNo = 2
   document.getElementById('content').style.display = 'none'
   return(false);
case 2:
   image.src = "images/img1.png"
   imageNo = 1
    document.getElementById('content').style.display = 'block'
    return(false);
}
}
</script>
 </head>

 <body>
  <h4><a href="#"><img id="image" name="image" src="images/img.png" border="0" onclick="swapImage();"/></a></h4>
  <div id="content" style="display:none">This content toggles</span>
 </body><code>

Answer 1

请参阅以下小提琴http://jsfiddle.net/AGgha/3/ 它使用jQuery（http://jquery.com/),which使你的js开发更容易，并让你动画你的div 当你在img上时，它使用setInterval进行infinte交换。我还添加了一些代码改进，以便在需要时更好地使用它。

Answer 2

如果您希望鼠标悬停在图片元素上，则使用onmouseover事件。

<img id="image" name="image" src="images/img.png" border="0" 
       onclick="swapImage();" onmouseover="swapImage();"/>

Answer 3

CSS :hover选择器很简单：

#image:hover {
    background: url(your/image.png);
}

如何将图像翻转添加到Javascript

3 个答案: