如何將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個圖標/圖像合併爲一個？

回答

相關問題