如何添加圖像翻轉到Javascript

我有一個圖像，當點擊隱藏的內容被顯示，它切換到不同的圖像，當再次點擊它恢復到正常狀態。我正在使用我在這個網站上找到的一些代碼，它效果很好。我想添加翻轉圖像以及。我難倒了如何做到這一點，因爲我不是很熟悉JavaScript。任何幫助表示讚賞。如何添加圖像翻轉到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>

來源

2012-03-31 vic

使用onmouseover事件如果您希望鼠標懸停在圖像元素上的行爲相同。

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

來源

2012-04-01 00:00:26 ShankarSangoli

感謝您的快速回復，我試過了，問題在於，一旦您將圖片懸停在圖片上，就會顯示內容並隱藏它，您必須將光標從圖片上移開然後回來 – vic 2012-04-01 00:08:36

嘗試添加一個onmouseout =「swapImage（）;」 – lifeIsGood 2012-04-01 00:13:26

我試過這個問題，然後是，一旦你點擊圖像，而不是它隱藏的內容，然後當你移動光標的內容是可見的當它不應該。 – vic 2012-04-01 01:44:47

的CSS :hover選擇很簡單：

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

來源

2012-04-01 00:16:51

請參閱下面的小提琴http://jsfiddle.net/AGgha/3/。
它使用jQuery（http://jquery.com/),which）讓你的js開發變得更容易，並且讓你的div動畫化
它使用setInterval進行infinte swaping，就像你在img上一樣。

來源

2012-04-01 00:37:18 marspzb

哇，我是一個新手o html，這有點凌駕於我的頭上。我玩了一段代碼，但我真的不知道我在做什麼。懸停時如何使圖像不能在圖像中循環播放？一旦圖像被點擊，是否可能只顯示內容？ – vic 2012-04-01 02:12:43

如果你看到小提琴那裏有mouseIn/mouseOut函數，他們在那裏做一個setInterval，你傳遞一個函數和一個毫秒數（x）。然後每x毫秒調用一次該函數。如果你想要這樣做，你應該調用具有相同參數的setTimeout（一個函數和一個毫秒數x），調用該函數它會在x毫秒後執行一次你的方法。如果您只想顯示懸停中的內容，則可以更改mouseIn/mouseOut函數，使用display =「block」顯示內容或使用jQuery執行slideUp/Down – marspzb 2012-04-01 05:27:26

如何添加圖像翻轉到Javascript

回答

相關問題