Is dynamic coloring of vector images possible with HTML5 & CSS3?

This is what I am trying to achieve. I have an image - the outline of the State of California.

开发者_JAVA技巧

I would like to change the color of this image dynamically and programatically based on a value.

Is it possible to achieve this using HTML5/CSS3/Javascript? In the larger scheme of things I intend to have the entire map - just a blank outline of it. And fill each of these states with dynamic colors by treating each of these states as an object.

Coding hints and samples are greatly appreciated.

try look at SVG, you can control it with js. Here good library for it svgweb

download archive with this lib and run file /samples/javascript-samples/helloworld.html on the top you will see button "Change Colors" I think it's exactly what you need

If you have the outline as vector points (rather than as an image) it would be trivial to render it into an HTML5 Canvas object, filled and outlined as required.

See https://developer.mozilla.org/en/canvas_tutorial

Take a look at this puppy.. I've seen it as a raw SVG and within an HTML page, and the functionality remained the same... Here's the same "Map Game" as a raw SVG...

The base doctype is SVG / XML served as image/svg+xml and the interactivity is contained wholly within the <![CDATA[ JavaScript block.. With the shape defs, typography, and styling within the SVG namespace...

The bridge between the two lies in the critical event handlers found in particular <g>, <path>, etc. XML element descriptors... such as <path id="Oklahoma" onclick="Check(evt)" onmouseover="On(evt)" onmouseout="Off(evt)" d="M 3.... etc.

This is just a static screenshot, but as you can see, it bears a close resemblance to your specific project...

That said, and I do digress, but the amount of convoluted and contradictory information regarding SVG best practices... I blame, in all seriousness, to a thinly veiled collusion between microsoft and adobe - in a sad attempt at stymying this particular standard - and the vendor agnostic revolution that would result from becoming a feasible option for "general" deployment.. It's been 10 years, and the momentum of progress is about to rip the soles off of their manipulative, dragging feet! Do keep up with SVG - and don't get distracted by plugins and fallbacks... Forge forward and know that this standard IS the death knell for platform-locked content authoring...

Either do it with an SVG, which has a DOM you can manipulate with regular DOM accessor functions (and you can embed it in your HTML5), or if it's just that one, use an image with a white background and transparent where the state is, so you can alter the background color of the image through CSS (although I guess that's not very useful for your case) Canvas looks like an overkill to me, and its support is no better than that of SVG.