Shading parts of an image

[Bryan]

Hello all,

I have an image that is set up like a table of smaller images. Instead
of just creating the smaller images separately and putting them
together with a table or CSS, I decided to just make one big image.
Now I'm starting to regret that because I need to be able to shade some
of the smaller images out depending on certain criteria. Is there any
way to have a transparent div of some sort that could be positioned
over the smaller images to make an image look like it's shaded? I'd
want to have a div with a gray background that has some transparency to
it so people can still see the image below it.

Is this at all possible or am I just going to have to cut the larger
image up into smaller images and have two of each image -- one normal
and one shaded?

Thanks in advance!

[Ben C]

On 2006-10-09, Bryan <BT**********@g mail.comwrote:

Hello all,

I have an image that is set up like a table of smaller images. Instead
of just creating the smaller images separately and putting them
together with a table or CSS, I decided to just make one big image.
Now I'm starting to regret that because I need to be able to shade some
of the smaller images out depending on certain criteria. Is there any
way to have a transparent div of some sort that could be positioned
over the smaller images to make an image look like it's shaded? I'd
want to have a div with a gray background that has some transparency to
it so people can still see the image below it.

You can do exactly that in Firefox with the -moz-opacity property, but
it's not widely supported by other browsers, so probably not a good idea.

div
{
color: gray;
-moz-opacity: 0.5;
}

Is this at all possible or am I just going to have to cut the larger
image up into smaller images and have two of each image -- one normal
and one shaded?

I think that is the only way to do it.

[Gus Richter]

Ben C wrote:

On 2006-10-09, Bryan <BT**********@g mail.comwrote:

>Hello all,

I have an image that is set up like a table of smaller images. Instead
of just creating the smaller images separately and putting them
together with a table or CSS, I decided to just make one big image.
Now I'm starting to regret that because I need to be able to shade some
of the smaller images out depending on certain criteria. Is there any
way to have a transparent div of some sort that could be positioned
over the smaller images to make an image look like it's shaded? I'd
want to have a div with a gray background that has some transparency to
it so people can still see the image below it.

You can do exactly that in Firefox with the -moz-opacity property, but
it's not widely supported by other browsers, so probably not a good idea.

div
{
color: gray;
-moz-opacity: 0.5;
}

>Is this at all possible or am I just going to have to cut the larger
image up into smaller images and have two of each image -- one normal
and one shaded?

I think that is the only way to do it.

Another way would be to overlay filters/screens over the desired image
segments.

--
Gus

[Martin Eyles]

"Bryan" <BT**********@g mail.comwrote in message
news:11******** **************@ m7g2000cwm.goog legroups.com...

Hello all,

I have an image that is set up like a table of smaller images. Instead
of just creating the smaller images separately and putting them
together with a table or CSS, I decided to just make one big image.
Now I'm starting to regret that because I need to be able to shade some
of the smaller images out depending on certain criteria. Is there any
way to have a transparent div of some sort that could be positioned
over the smaller images to make an image look like it's shaded? I'd
want to have a div with a gray background that has some transparency to
it so people can still see the image below it.

Is this at all possible or am I just going to have to cut the larger
image up into smaller images and have two of each image -- one normal
and one shaded?

Thanks in advance!

Are the images (in this case, bits of your image) the same except for
textual content, or are they different in other ways? - If they only differ
in textual content then you can have real text with just two small images.

If they are different then you are best doing as you say, using transparent
<div>s. For style you can use {opacity:0.5} to cover standards compliant
browsers.

Older versions of firefox (and similar) need {-moz-opacity:0.5} instead and
if you want to also work in IE6 then you can use {filter:alpha(o pacity=50)}.
These work pretty well, and shouldn't cause a problem in other browsers, but
they won't validate (because they're not valid).

Martin

[Bryan]

Thanks guys for all the suggestions. Martin, is what your referring to
by recommending {filter:alpha(o pacity=50)} the same as what Gus
mentioned above?

[Jeremy]

Ben C wrote:

On 2006-10-09, Bryan <BT**********@g mail.comwrote:

>Hello all,

I have an image that is set up like a table of smaller images. Instead
of just creating the smaller images separately and putting them
together with a table or CSS, I decided to just make one big image.
Now I'm starting to regret that because I need to be able to shade some
of the smaller images out depending on certain criteria. Is there any
way to have a transparent div of some sort that could be positioned
over the smaller images to make an image look like it's shaded? I'd
want to have a div with a gray background that has some transparency to
it so people can still see the image below it.

You can do exactly that in Firefox with the -moz-opacity property, but
it's not widely supported by other browsers, so probably not a good idea.

div
{
color: gray;
-moz-opacity: 0.5;
}

>Is this at all possible or am I just going to have to cut the larger
image up into smaller images and have two of each image -- one normal
and one shaded?

I think that is the only way to do it.

Actually, the CSS3 'opacity' property *is* widely supported across many
browsers:

div.shader
{
background-color: gray;
opacity: 0.5;
}

The only exception is IE <= 6, which has its own way of accomplishing
this - which you can add, as long as you don't care about your CSS
validating (the CSS spec says that CSS code shouldn't have to validate
in order for the valid portion to be understood - so this shouldn't be a
big deal).

div.shader
{
background-color: gray;
opacity: 0.5;
filter:progid:D XImageTransform .Microsoft.Alph a(opacity=50);
}

Change 'opacity' value to anything between 0 and 1 - 0 being invisible
and 1 being completely opaque. Change the 'opacity=' value in the DX
filter to the 'opacity' value times 100.

Jeremy

[Martin Eyles]

"Bryan" <BT**********@g mail.comwrote in message
news:11******** **************@ i3g2000cwc.goog legroups.com...

Thanks guys for all the suggestions. Martin, is what your referring to
by recommending {filter:alpha(o pacity=50)} the same as what Gus
mentioned above?

I think so, yes.

I would look at Jeremy's answer too, as his sytax for use of filter (for
IE6) might be a bit more accurate than mine (best to test in IE6 just to
make sure). Also, he explains which way is more transparent opaque.

Hope that it all works - post a link to the site so we can see it working.

Martin