change color of a white box using jquery

Question

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>

And other than having your jQuery inside a style block, what problems are you having? What errors do you get? — j08691, Apr 12 '16 at 15:48
the problem is that i cannot change color when i click on the image nothing happens — user3144895, Apr 12 '16 at 15:49
So, you're trying to change the heart from red-yellow-blue etc? Not the html boxes? If so, then you'll need to try something like this. http://stackoverflow.com/questions/23830471/convert-image-color-without-changing-its-transparent-background — Lewis, Apr 12 '16 at 15:50
Its not possible to change the color of image. Instead if you use different image with different color the you can use jquery on click and display related image. — Binod Gurung, Apr 12 '16 at 15:53
i want to change the color of the image using the html boxes — user3144895, Apr 12 '16 at 15:53

score 0 · Answer 1 · 2016-04-12T15:49:52.313

0

If your image background is transperant, you can just change the background-color:

$(document).ready(function(){
    $('img').css('background-color', 'red');
});

edited Apr 12 '16 at 15:49

answered Apr 12 '16 at 15:48

This changes the colour of the box. However, I think they want to change the colour of the heart (the image) . – Lewis Apr 12 '16 at 15:49
Thank you, my answer is edited. – Apr 12 '16 at 15:53

score 0 · Accepted Answer · edited May 23 '17 at 12:06

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

change color of a white box using jquery

2 Answers2

Preferred Solution

Alternative Solution