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

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

I've implemented a very similar feature on one site I've built. We allow users to select from different layouts (similar to your html) as well multiple palettes of colors, images, etc. You definitely do this with jquery:

On init of the page you can do

$("head").append("<link>");

On some sort of change event (or reload of data). My data is loaded via ajax

css = $("head").children(":last");  // or find your <link> that you'd replace
   css.attr({
   rel:  "stylesheet",
   type: "text/css",
   href: path_to_your_css
});

You can change anything you want that way including colors and images.

Answer 3

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.