I need to change the color of an image on a website. The image is of a carport, so the texture and shadow's needs to stay consistent. If I change the color by just swapping the images with other ones in a different color I would have to have approximately 7500 images and I don't think it would be the most efficient way of doing this, so I am asking the munity if there is a jQuery code that would allow me to place some sort of color filter on top of a white carport and change the color real-time on the website?

This is a sample of one of the images I have to start with.

The only thing that can change color is the roof part, the metal rails in the image cannot change color and the background cannot change color either.

Update: I think it would be easier to make this using flash. I know that car dealer sites use flash as well. Does anyone know any good tutorials for flash?

I need to change the color of an image on a website. The image is of a carport, so the texture and shadow's needs to stay consistent. If I change the color by just swapping the images with other ones in a different color I would have to have approximately 7500 images and I don't think it would be the most efficient way of doing this, so I am asking the munity if there is a jQuery code that would allow me to place some sort of color filter on top of a white carport and change the color real-time on the website?

This is a sample of one of the images I have to start with.

The only thing that can change color is the roof part, the metal rails in the image cannot change color and the background cannot change color either.

Update: I think it would be easier to make this using flash. I know that car dealer sites use flash as well. Does anyone know any good tutorials for flash?

• javascript
• jquery
• css
• flash
• colors

• What about simply overlaying it with a partially transparent div, with a background color and opacity? – user142019 Commented Mar 10, 2011 at 0:36
• what about creating a flash app instead of jquery or javascript? – Renzo Gaspary Commented Mar 10, 2011 at 2:51
• 2 Please don't go to that trouble w/o checking this out. I've got an example of what I mean here. Basically, you take the carport image and you use GIMP to do the following: convert color to alpha channel - this "bleeds" the white out and leaves you with semi-transparent areas inside the carport. Then change the background around it to be solid white. Then whatever color you have in the dive behind it bleeds in and you just change the div. Your carport here – J Trana Commented Mar 10, 2011 at 5:29

4 Answers 4

Can you create the "colorless" image as something like a PNG which supports transparency and then have a colored div or something in the background that bleeds through?

You could also use php to generate the image, with the imagecopymerge function. It would save time being able to set the color filter and image in the url:

<img src="image.php?img=carport&color=blue" />

Put a transparent div over your image and change it's background accordingly. In the example link below, I used jQuery to change colors when button is clicked. I used several CSS transparency properties so you get a cross browser solution.

Opacity properties for cross browser patibility including IE6

.opacity{
    -khtml-opacity:.20;
    -moz-opacity:.20;
    -ms-filter:”alpha(opacity=20)”;
    filter:alpha(opacity=20);
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.2);
    opacity:.20;
}

jQuery code, when button is clicked color changes.

$('#red, #green, #yellow, #blue').click(function(e) {
    var x = e.target.id;
    $('.filter').css({'background': x})
})

Check working example with at http://jsfiddle/gVQc3/4/

Given html like the following:

<div id="gallery">
    <img src="http://farm2.static.flickr./1157/1054046043_82c48223f1.jpg" />
    <div id="overlay"></div>
</div>
<ul id="colors">
    <li>Red</li>
    <li>Green</li>
</ul>

CSS:

#gallery {
    position: relative;
    display: inline-block;
    margin: 0 auto;
}

#gallery img {
    border: 1px solid #ccc;
    padding: 0.4em;
}

#overlay {
    position: absolute;
    top: 0.5em;
    left: 0.5em;
    right: 0.5em;
    bottom: 0.5em;
    background-color: transparent;
    opacity: 0.4;
}

#colors:before {
    content: "Select a color overlay: ";
}

#colors li {
    display: inline-block;
    margin: 0 0.5em 0 0;
    padding: 0.2em 0.5em;
    border: 1px solid #ccc;
    cursor: pointer;
}

And jQuery:

$('#colors li').hover(
    function(){
        var color = $(this).text();
        $('#overlay').css('background-color',color);
    },
    function(){
        $('#overlay').css('background-color','transparent');
    });

Leads to the following JS Fiddle example.