473,320 Members | 1,977 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

Shading parts of an image

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!

Oct 9 '06 #1
6 5447
On 2006-10-09, Bryan <BT**********@gmail.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.
Oct 9 '06 #2
Ben C wrote:
On 2006-10-09, Bryan <BT**********@gmail.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
Oct 9 '06 #3
"Bryan" <BT**********@gmail.comwrote in message
news:11**********************@m7g2000cwm.googlegro ups.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(opacity=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
Oct 9 '06 #4
Thanks guys for all the suggestions. Martin, is what your referring to
by recommending {filter:alpha(opacity=50)} the same as what Gus
mentioned above?

Oct 9 '06 #5
Ben C wrote:
On 2006-10-09, Bryan <BT**********@gmail.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:DXImageTransform.Microsoft.Alpha(opa city=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
Oct 10 '06 #6
"Bryan" <BT**********@gmail.comwrote in message
news:11**********************@i3g2000cwc.googlegro ups.com...
Thanks guys for all the suggestions. Martin, is what your referring to
by recommending {filter:alpha(opacity=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
Oct 10 '06 #7

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

1
by: red | last post by:
I'm probably crazy for even trying this but I'm trying to make a script that will iterate through my databases, iterate through all the tables, and show everything on one page in forms that allow...
2
by: KP | last post by:
I want to automatically highlight parts of a webpage (make them standout from the rest of the contents). These parts could be as small as single image tags, and as large as complex tables, parts of...
2
by: info | last post by:
Hello, The problem is to acquire image data and process them in parallel on a Windows 2000 system. So I am thinking of two threads. First thread is puting all the image data into a std::queue...
1
by: jeffgeorge | last post by:
Using a bit of code to produce alternate line shading in a report. Seems it should work for a form as well but no luck. Does anyone have any ideas what I need to change or if it is even possible...
3
by: buck | last post by:
reports/ can we alternate formatting such as "no shading" and then "shading" for multiple records such as a phone directory in Access2000 reports
1
by: Meena Desai | last post by:
Hi, I am trying WEB PARTS in my site. I have prepared a sample site for that, in which I have placed 2 web part zones on a Page. Both zones contain Image buttons for Close verb and Minimize...
1
by: rudjohn | last post by:
I've been tasked with the not-enviable job of creating an application with multiple, semi-customizable templates. My basic concept, thus far, has been a combination of Master Pages (for layout) and...
0
by: tommydog | last post by:
i want to add a parts viewer system to a website. the user selects the item they own from a database and then the page shows a parts diagram, related diagrams and a parts list (to be integrated into...
76
by: lorlarz | last post by:
Crockford's JavaScript, The Good Parts (a book review). This shall perhaps be the world's shortest book review (for one of the world's shortests books). I like Douglas Crockford (because I am a...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.