Q:

change color of a white box using jquery

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 
 <!doctype html>
 <html>
 <head>
 <meta charset="utf-8">
 <title>Untitled Document</title>
 <style>
 .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;
}
</style>
<style>
$('#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;
   }
  </style>
  </head>

 <body>

 <div class="foo blue"></div>
 <div class="foo purple"></div>
 <div class="foo yellow"></div>

 <p><img src="Pictures\heart.gif" width="550" height="712" border="0"></p>
 </body>
 </html> 

A:

If I understand you correctly, this isn't possible in the manner that you are attempting to do it. CSS, in this context, is used to style the HTML and cannot be used to manipulate images (well, actually, it can, but not to this degree: see filters).
Preferred Solution
Ditch the heart image altogether. Create your heart using CSS. This allows you to manipulate all of it's properties very, very easily. Demo in the snippet below.

$('.button').click(function(){
  var color = $(this).attr('data-color');
  
  $("#heart").removeClass('yellow').removeClass('blue').removeClass('red').addClass(color);
  
  console.log(color);
})
#heart {
    position: relative;
    width: 100px;
    height: 90px;
}
#heart:before,
#heart:after {
    position: absolute;
    content: "";
    left: 50px;
    top: 0;
    width: 50px;
    height: 80px;
    background: red;
    -moz-border-radius: 50px 50px 0 0;
    border-radius: 50px 50px 0 0;
    -webkit-transform: rotate(-45deg);
       -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
         -o-transform: rotate(-45deg);
            transform: rotate(-45deg);
    -webkit-transform-origin: 0 100%;
       -moz-transform-origin: 0 100%;
        -ms-transform-origin: 0 100%;
         -o-transform-origin: 0 100%;
            transform-origin: 0 100%;
}
#heart:after {
    left: 0;
    -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
         -o-transform: rotate(45deg);
            transform: rotate(45deg);
    -webkit-transform-origin: 100% 100%;
       -moz-transform-origin: 100% 100%;
        -ms-transform-origin: 100% 100%;
         -o-transform-origin: 100% 100%;
            transform-origin :100% 100%;
}

.button{
  width: 50px;
  height: 50px;
  display: block;
  float: left;
  margin-right: 5px;
}

#heart.blue:after, #heart.blue:before{
  background: blue;
}

#heart.red:after, #heart.red:before{
  background: red;
}

#heart.yellow:after, #heart.yellow:before{
  background: yellow;
}

.button.blue{
  background: blue;
}

.button.red{
  background: red;
}

.button.yellow{
  background: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="heart"></div>

<div class="button blue" data-color="blue"></div>
<div class="button red" data-color="red"></div> 
<div class="button yellow" data-color="yellow"></div>

Alternative Solution
Alternatively, you can manipulate the image data using canvas. I'm not qualified to tell you how to do this, but there's a nice Q&A thread here that will help - Convert Image Color without changing its transparent background

