Как объединить 2 значка/изображения в одном?

Question

Я этот код:

<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.

Как я могу объединить два значка, чтобы иметь только один значок с видимой паузой, а onclick изменит значок на значок-воспроизведение и все еще выполняет функцию document.getElementById ('video_background').()»

с наилучшими пожеланиями

Answer 1

Если вы хотите сохранить их как одно изображение и отображать только один значок (т.е. половина изображения) на один раз, вы можете сделать spritesheet. This article объясняет, как сделать их в деталях. Вы просто настраиваете background-position в зависимости от того, какой значок вы хотите видеть! Дайте мне знать, если вам нужно больше деталей.

Answer 2

Вот некоторые 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>