如何将2个图标/图像合并为一个？

我有这样的代码：如何将2个图标/图像合并为一个？

<li><a href="javascript:void(0);" onclick="document.getElementById('video_background').play()"><i class="icon icon-play"></i></a></li> 
<li><a href="javascript:void(0);" onclick="document.getElementById('video_background').pause()"><i class="icon icon-pause"></i></a></li>

创造者2个图标：http://imgur.com/L08OI7V 每个图标运行diferente功能。

如何组合两个图标，只有1个带图标暂停可见的图标，onclick会将图标更改为图标并继续执行“document.getElementById（'video_background'）函数。（）”

问候

来源

2014-01-23 user3225782

你正在寻找的东西叫做CSS Sprite。搜索它，你可以得到很多文章:) –

如果你想保持他们作为一个单一的形象，只有一次显示一个图标（即一半的图像），你可以做一个spritesheet。 This article解释如何使它们详细。您只需调整background-position，具体取决于您希望可见的图标！让我知道你是否需要更多细节。

来源

2014-01-23 00:33:23 Marcatectura

通过使用CSS精灵，你也将消除一个HTTP请求:-) –

下面是一些css/js，可能会让你更接近。 http://jsfiddle.net/brocklob/6s58y/2/ 如果这没有帮助尝试改写你的问题/粘贴整个例子。

<style> 
.icon { 
display: block; 
width: 46px; 
height: 46px; 
background: url('http://i.imgur.com/L08OI7V.jpg') no-repeat; 
background-position: right top; 
} 

.icon-play { 
background-position: left top; 
} 
</style> 
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> 
<script> 
    $('.icon').on('click', function(e) { 
     $('.icon').toggleClass("icon-play"); 
     e.preventDefault(); 
    }); 
</script> 

<button class="icon"></button>

来源

2014-01-23 01:10:42 brockis

如何将2个图标/图像合并为一个？

回答

相关问题