change color of a white box using jquery : <p>hello I want to know how I can change the color of an image using different color boxes i have an image of a heart and i want to change color from white to red, blue, yellow ect. i want to be able to change it on command thank you </p>

<pre><code> &lt;!doctype html&gt;
 &lt;html&gt;
 &lt;head&gt;
 &lt;meta charset="utf-8"&gt;
 &lt;title&gt;Untitled Document&lt;/title&gt;
 &lt;style&gt;
 .foo {
 float: left;
 width: 20px;
 height: 20px;
 margin: 5px;
 border: 1px solid rgba(0, 0, 0, .2);
  }

.blue {
 background: #0012E3;
 }

.purple {
background: #ab3fdd;
}

.yellow {
 background: #FFF728;
}
&lt;/style&gt;
&lt;style&gt;
$('#background').on('change', changeColor);

function changeColor() {
var color = $('#background').val();
$('p').css('color', color);
}
.non {
margin: 15px;
padding: 15px;
clear: none;
float: none;
height: 15px;
width: 15px;
   }
  &lt;/style&gt;
  &lt;/head&gt;

 &lt;body&gt;

 &lt;div class="foo blue"&gt;&lt;/div&gt;
 &lt;div class="foo purple"&gt;&lt;/div&gt;
 &lt;div class="foo yellow"&gt;&lt;/div&gt;

 &lt;p&gt;&lt;img src="Pictures\heart.gif" width="550" height="712" border="0"&gt;&lt;/p&gt;
 &lt;/body&gt;
 &lt;/html&gt; 
</code></pre>
