changing background brightness

[johnnyb]

Hello,

Is there a CSS value "brighten" or "brighter" something like that for CSS? I'd like to use it for mouseovers, but the things that I want to do the mouseover to will be in more than one colour so it would be more convenient to have such an attribute than to have to make a different colour value for each mouseover.

JB

[ronaldb66]

Elaborate.

To my knowledge, standard CSS doesn't provide a brightness property of some sort; browsers-specific implementations may do so, but I tend to steer clear of those.

[brothercake]

You can specify colours as HSV values ... but that's only supported in mozilla 1.4 builds ...

But every colour can be represented with RGB - start with your original colour, import it into a graphics prog and change the brightness till you like it, then get the new colour value and make the mouseover change to that. It amounts to the same thing.

[johnnyb]

What I'm looking for is like this...

say you have 9 links, each in a table cell. The backgrounds of these table cells are each a solid colour, but there are 3 different colours so you end up with a checkerboard effect.

Then, when you roll over one of the boxes, that background colour brightens up.

What I would like to do is write one CSS class for the brightening up of the colour, instead of 3. Is there some sort of CSS command/attribute that will simply brighten an existing colour?

I believe there is not, as brothercake says, but I thought I'd ask in case somebody knows something I don't.

[shlagish]

Use javascript:

onMouseover--> bgcolor=bgcolor+some_value

[ronaldb66]

How did you implement the checker board effect you mentioned?
(Don't checker boards have two colors? :D)
Does each table cell have a single background color?
Do you wish to change the background color of more than one table cell at a time?
Can you supply an example of what you wish to achieve?
(You can tell by the many questions I haven't figured out what you want yet... :o )

[johnnyb]

Hello - Here are the answers to some of your questions...

The checkerboard is a bunch of table cells with a each with a different class. it is a page that is generated in ASP. You can see a 2-colour one online at http://www.avriel.com/CD03/demo/build/showcase/index.htm

Each table cell has only 1 background colour.

I only want to change the 1 cell at a time.

the example at the URL quoted above is pretty much how it'll work, except I want the original background colour to brighten up, instead of changing to red, and I don't want to have to write 2 different classes for each cell, (ie, a "normal" and a "bright" class). Call me lazy, but it'll be a lot easier to implement & maintain.

maybe that'll help:p

[brothercake]

Well you have opacity - win/IE and mozilla both have proprietary properties for that. So start with your original colors at their full brightness, then apply opacity to each one

.square { filter:alpha(opacity=75); -moz-opacity:0.75; }

And then you can change it in your rollover

squareObj.filters.alpha.opacity = 100;
squareObj.style.mozOpacity = 1;

[ronaldb66]

Call me lazy
I just did; this whole thread is about you not having to type out three <a> style definitions but restrict yourself to one. Big deal.
You don't need two classes per color, just one; define three different link classes, one per color, and use the :hover pseudoclass to change the normal background color to the mouseover one. If you've typed out one, you can copy and paste the next two and only need to change the color values; that'll probably take less time than it did me to type this post.