asked on

Colorizing an Image using CSS (Filter?)

Dear All,

I would like to display an image on a page that is colorized so that it looks blue for example, but when the user mouseovers on it it changes color. Is there a way of doing this? Perhaps an IE specific filter can achieve the colorization of images?

Any help much appreciated.

Ben.

mreuring

Allas I don't have the time to look into this further, as it should be relatively easy, but in the mean time, some links for reading up on your knowledge perhaps :)
http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/filter.asp how to do filters in IE only css
http://msdn.microsoft.com/workshop/author/filter/reference/reference.asp the selection of possible filters you can apply...

Good luck,

Martin

mrichmon

Another reference for filters that is from the same site (but a different page) as mreuing's links is :
http://msdn.microsoft.com/workshop/author/filter/filters.asp

THe problem with filters in CSS that I have seen is that they are not supported very well.

One easy way which doesn't involve CSS is to have two images and use javascript to change the image on mouseover.

ASKER CERTIFIED SOLUTION

hyperslug

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

webtechy

ASKER

Hi guys,

I'm afraid I don't have that much control over the code to add onmouseout's or some more clever JavaScript etc. I did _think_ about that though and seems the closest you can do.

Have looked through the Microsoft filters and can't seem to find anything that really applies unfortunately. Not too worried about browser support as not "mission critical" if doesn't work - just a nice to have ...

Cheers,

Ben.

hyperslug

Ok, then use an <A> tag, (doesn't seem to work right in mozilla though):

---------------------------------------------------------------------------------------
<style>
      .alpha {
            filter: alpha(opacity=50); /* IE */
            -moz-opacity: 0.5; /* Mozilla */
            border: 0px;
            cursor: default; /* discourage ppl from clicking */
      }
      a.colorize { background: red; }
      a.colorize:hover { background: blue; }
</style>

<a href="#" class="colorize"><img src="/graphics/kids.jpg" class="alpha"></a>

Joakim_

Filters sucks, and they are compatible with very few browsers, find an another solution.

webtechy

ASKER

As I say, not too fussed about compatibility as it doesn't really matter too much anyway ...

hyperslug

Did the A tag method work?

webtechy

ASKER

I didn't have the option of changing the code as such, although I did apply a similar technique elsewhere on the site. Although it's not colorization in Paint Shop Pro terms (as the image is just composed on a range of blues for example), it does tint the image so that it matches the general branding of the site.

webtechy

ASKER

(I did try img:hover on the off-chance that that may work ;-))