Reputation: 1514
I've a very strange requirement, I've an image(Image has slight gradient effect) which center portion need to be shown with the color change with the user score colour 255,255,0 for High Score and 155,155,55 for Low Score
Now I want to know which way should I do it, I tried it with the HTML5 Canvas but that wouldn't work with the IE, so I'm discarding this option
I don't know it can be done with the css or not
Or with the GD lib using PHP
HERE is the image http://i47.tinypic.com/b88l13.png
Thanks
Upvotes: 1
Views: 517
Reputation: 28147
I have developed several projects using the Processing.js library and I fell in love with it. If you want you can try it, you could do what you asked in a few lines using http://processingjs.org/reference/tint_/ .
PImage b;
b = loadImage("http://i47.tinypic.com/b88l13.png");
void setup(){
size(200,200);
}
void draw(){
tint(255, 0, 0);
image(b, 0, 0);
}
You may want to split the colored (pyramid) part from the background and only tint that part.
Note that in the demo I have used the Base64 version of that image to avoid cross-domain policy issues. DEMO: http://jsfiddle.net/CrUja/
It works in IE9 and I think you can make it work in IE8 using http://code.google.com/p/explorercanvas/ (or maybe Processing.js already has this integrated)
Upvotes: 1