Adjust Brightness of Image

Is this possible 'on the fly'

[Paco]

I would like to change the brightness of an image on the fly keeping hue and intensity constant. Is it possible with CSS + javascript?

[Birdman]

I don't think you can do it with CSS, but maybe with one of the PHP Image Functions [php.net]. There are alot of them.

[tedster]

If you're only concerned about changing brightness because of the platform gamma, you could try using PNG for your image format. PNG supports an embedded gamma value so that Macs get a different brightness than PCs, at least on browsers with good PNG support. That list of supportive browsers does include the latest IE, NN/Moz, and Opera.

But if you need more than that, I'd guess that PHP would be your best hope.

[Paco]

I want to keep it as dynamic as possible, that's why I want to do it client side.

If I can only support newer browsers (IE5+/NS6+/...) no problem so PNG is ok for me.

I think that if I explain better what I want to do I'll make things easier for everybody:

I want to have a color wheel image where users select a color by clicking in it (easy part). I also want to have a bar to modify the lightness of the color wheel image so the represented colors change. When a color is selected I want to be able to know the color and paint it somewhere else on the user screen (calculus stuff).

Can css do this? Something else?

Hope this helps.

[Birdman]

Paco,

There may be hope. See this thread [webmasterworld.com].

Birdman

[Paco]

I was thinking about something similar, but which property do I have to tweak to change the lightness of the image? Maybe the gamma as stated above? Would tweaking the gamma allow me to convert the image anywhere from almost black to almost white?

[RFranzen]

I want to have a color wheel image where users select a color by clicking in it (easy part). I also want to have a bar to modify the lightness of the color wheel image so the represented colors change. When a color is selected I want to be able to know the color and paint it somewhere else on the user screen (calculus stuff).

Can css do this? Something else?

Paco,

It is probably a lot more complex than you are hoping for, but if the "Something else?" includes Java, the answer is yes. Java would also give you control of saturation, not mentioned in your description above.

[Sorry if following paragraph violates Webmasterworld policy. I am just trying to answer his question.]
Check my profile for home page and click to the interactive color wheel. Source code is included should you decide Java might be a viable approach.

-- Rich

[HocusPocus]

I don't know whether this will help at all but you could dynamically amend the brightness/Opacity by using a div and a filter, works on IE4+

<DIV ID="filterDIV" STYLE="background:green;
filter:progid:DXImageTransform.Microsoft.Alpha( Opacity=20, Style=0)">
YOUR IMAGE</DIV>

...

<SELECT onchange="filterDIV.filters.item('DXImageTransform.Microsoft.Alpha').opacity=this.options[this.selectedIndex].value">
<OPTION VALUE="0">0</OPTION>
<OPTION VALUE="10">10</OPTION>
<OPTION VALUE="20">20</OPTION>
...
<OPTION VALUE="90">90</OPTION>
<OPTION VALUE="100" SELECTED>100</OPTION>
</SELECT>