change Image colour tint using JavaScript

Question

I have a image which I can apply apply colour tint, original image:

original image When background is applied

when background color applied.

I'm using CSS to change the colour:

<html>
  <head>
  <style type="text/css">
    div.background
     {
     width:480px;
     height:300px;
     background:url(whiteroom.jpg) repeat;
     }
   div.transbox
    {
     width:480px;
     height:300px;
     background-color:#FF3E96;
     opacity:0.5;
     filter:alpha(opacity=60); /* For IE8 and earlier */
     }
     </style>
    </head>
<body>
  <div class="background">
  <div class="transbox">
  </div>
  </div>
  </body>
</html>

How can I use javascript and CSS to change an image to reflect the selected colour. I don't need to able choose from different colours, all I need is one colour and different shades of that colour that I can select, for example a chose of different of pink shades.

Thank you :)

probably you can consider using jquery plugins, such as github.com/jseidelin/pixastic or github.com/nicolaisi/tancolor — Nicholas TJ
– Nicholas TJ, Commented Nov 13, 2013 at 12:05

Diodeus - James MacFarlane · Accepted Answer · 2012-04-17 18:14:31Z

1

You can use CSS:

<div class="background">
  <div id="tint" class="transbox blue"></div>
</div>


div.transbox.blue {
      background-color:#0000ff;   
}

JS:

document.getElementByClassName('tint').setAttribute('class', 'transbox blue')

answered Apr 17, 2012 at 18:14

Diodeus - James MacFarlane

115k33 gold badges164 silver badges180 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

change Image colour tint using JavaScript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related