在div中翻轉圖像？

-1

我有一個自定義的twitter分享按鈕，位於頁面的右下角。它是一個div內的圖像，旨在翻轉，但不會翻轉。是否有可能在div內添加翻轉圖像？那麼是否有解決方法可以使圖像翻轉？在div中翻轉圖像？

HTML：

<div id="twitter"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('twitter','','Images/twitterrollover_06.png',1)"><img src="Images/twitter_06.png" width="46" height="51" ></a></div>

CSS：

#twitter { 
font-family: "Bebas Neue"; 
color: #000; 
margin: 0 auto; 
padding: 0; 
right: 40px; 
bottom: -12px; 
position: fixed; 
z-index: 100; 
font-size: 30px; 
}

來源

2014-06-19 Dunne08

不足夠描述！考慮添加一些細節，並添加JS代碼。 –

@AmanuelNega ive更新了它的更多細節，我希望有幫助。我沒有這個JS。基本上我的問題是我如何添加一個圖像，在div內翻轉？請不要離開我的負面評級，即時通訊真的是新的 – Dunne08

如果你只是做一個簡單的圖像滾動在CSS中做。 –

如果這是一個簡單的圖像翻轉不要使用JS這種使用CSS。

a.twitter { 
    display: block; 
    cursor: default; 
    width: 400px; 
    height: 300px; 
    background: url('images/twitter.png') top left; 
} 

a.twitter:hover { 
    background-position: center left; 
} 

a.twitter:active { 
    background-position: bottom left; 
}

馬克它在HTML這樣的...

<div class="twitter"> 
    <a href="javascript:void(0)" class="twitter"></a> 
</div>

來源

2014-06-19 23:45:01

這工作，非常感謝。我只需要將它們從課程更改爲ID和Tweek的定位 – Dunne08

你可以做到這一點的JavaScript。

<div class="twitter"><img src="1.png"/></div> 
<script type="text/javascript"> 
    var t = document.getElementsByClassName("twitter")[0];//i only have one element with that tag so... 
    //if you are going to put more you can loop through them 
    prepareRollOver(t);//call the function to prepare the rollover 
    function prepareRollOver(target){ 
     target.onmouseover = function(){ 
      img = this.getElementsByTagName("img")[0];//only one img expected, so take the first of the array 
      img.src="src1.png" 
     } 
     target.onmouseout = function(){ 
      img = this.getElementsByTagName("img")[0];//only one img expected, so take the first of the array 
      img.src="src2.png" 
     } 
    } 
</script>

你也可以用CSS做這樣

.twitter{ 
    background:url("1.png"); 
} 
.twitter:hover{ 
    background:url("10.png"); 
}

但刪除DIV中的img標籤，你不需要它，如果你打算使用CSS 變化src1.png和src2.png匹配你的文件名。

來源

2014-06-20 19:12:54

在div中翻轉圖像？

回答

相關問題