在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中翻转图像？

回答

相关问题