Dynamically changing image colours

Question

I am developing an application which displays multiple views as tables (for example customers, products, etc.). The last column of each row contains buttons, using which the user can perform some actions on a specific row. Simplified example:

<td class="actions">
  <a href="projects/some-project/edit">
    <img src="images/edit-project.png" alt="Edit project" />
  </a>
  <a href="projects/some-project/do-something">
    <img src="images/someaction.png" alt="Do something else with the project" />
  </a>
</td>

The images are transparent pngs. The amount of buttons per table can vary, now there are about 30 in total.

I was asked to make changes in the application css styles, so different tables can now have different colours, for example the customers table now has some grrenish tint, the projects one is blue and so on. Moreover, "odd" table rows have a slightly different colour than "even" ones. The rows also change colours if they are selected.

The problem is that the design states that the buttons have to change colours along with the rows. This requires making lots of button - colour combinations, and there will be more buttons added in the future.

I think a better way than assigning the designer with making hundreds of versions of the buttons in different colours is to make it dynamically, depending on the table class. My question is - what would be the most efficient way to do it? The application uses php as the server-side language and javascript with jQuery on the client side. The problem with the images is that they are not monochrome but use multiple colours so I would have to manipulate their HSL according to css classes.

If the better way if to use php, I would probably use ImageMagick. The question is what is the best method to acquire an image coloured very closely to a provided colour.

Answer 1

I would use jQuery for this and set the color behind the png or of the png regarding the css class/es of the table.

Dont use too much php like Imagemagick because it slows down the rendering of the page dramatically.

take a look at Pixastic (coloradjust)
https://github.com/jseidelin/pixastic http://www.pixastic.com/lib/docs/actions/coloradjust/

or PaintbrushJS (colour tint)
https://github.com/mezzoblue/PaintbrushJS
http://mezzoblue.github.com/PaintbrushJS/demo/

or CamanJS (colorize)
http://camanjs.com/
http://camanjs.com/guides/#BuiltIn
https://github.com/meltingice/CamanJS/

or VintageJS
http://rendro.github.io/vintageJS/
https://github.com/rendro/vintageJS

Answer 2

Can you post one of those images? Because if it's transparent as you say, you could just style the a that contains those images.

For example:

.actions > a {
    width: 40px;
    height: 20px;
    display: block;
    border-radius: 5px;
    border-width: 1px;
    border-style: solid;
}

.actions > a.green {
    background-color: green;
    border-color: darkgreen;
}

.actions > a.orange {
    ...
}

And so on.