<!DOCTYPE html>
<html lang="en-US">
<head>
<style>
div{
margin-top: 15px;
width: 181px;
height: 163px;
background: url("frog.png") 0px 0px;
}
</style>
</head>
<body>
<h1>CSS Image Sprites Technique</h1>
<div></div>
<button onclick="myFunction()">Click Me</button>
<script>
var x = document.getElementsByTagName("div")[0];
function myFunction(){
x.style.background = "url('frog.png') 181px 0px";
}
</script>
<p><strong>Note</strong>: Click on the button to change the background image from 'male happy' to 'male sad'.</p> </body>
</html>