Web Hosting Talk







View Full Version : Table Cell Opacity / Transparent ??????????


lost2
08-28-2003, 02:21 AM
hey hi :)

i would like to know how i can make a table cell kind of transparent... where you can see the background color and see that behind it there's a background image

example:

<table background="someiage.gif" cellspacing="10">
<tr>
<td bgcolor="#808080" class="opaque">



any ideas?? tanx in advance

WStevens
08-28-2003, 03:38 AM
I have never known that you can make a cell transparent.. Cool! I will definitely have to subscribe to this thread to see if anyone can share their knowledge..

-Will

MrSizzle
08-28-2003, 03:52 AM
I am not sure if this is possible either. I have been searching on www.htmlgoodies.com but haven't found a reference to that yet.

You might want to try sending an email asking that very question. It is one of the places you should be able to get the answer from.

:smokin:

El Nino
08-28-2003, 09:03 AM
I've been wondering the same thing for a while now. I've seen it done on a website before but I forgot to save the source code. I'm pretty sure CSS is involved.

Deathdart
08-28-2003, 09:24 AM
I don't know if it's possible using CSS, but you can definitely do it using a 4px GIF.

Make a new 4 pixel file. Colour the top left and bottom right pixels with the colour you want the cell to be. Leave the other two pixels white (or some other colour). Save the file as a .gif and set the transparent colour to white (or the other colour). Use this image as your cell bg and you should have a cell with a transparent background. :)

If anyone can tell me how it's done with CSS, I'd be glad to know...

VanHost
08-30-2003, 01:28 AM
I think Deathdart has it figured out. I have never seen it done with code, it is more of a graphical thing.

I might just keep my eye on this thread (like the rest of you) to see if there is an "all-mighty" that could share his/her infinite wisdom.

Thanks.

El Nino
08-31-2003, 11:57 AM
I found this example website, is this what you're trying to do?
http://www.option5.net/testing/

lost2
08-31-2003, 01:28 PM
i did it here:
http://rapreport.com/klr/bio.htm

check out the code there... if anyone figures out how that code works please tell me becuz i subtracted alot from it.. i forgot where i got it from


i will try the image 4 pixel thing, sounds like it will work, good thinkin ;)

tanx


check the site i'm doing this to @ www.305hiphop.com

lost2
08-31-2003, 01:57 PM
i tried several ways to do the pixel thing but i dont' like how it looks.. i'm going to try to mess with that code, if yall didn't see it this is the source

<head>
<style>
.a{z-index:10;position:absolute; height:40;width:150;top:50;left:12;border:000000 solid 1px;padding:5;background:fee;font:11;color:000;}
</style>
</head>


<body background="http://www.rapreport.com/klr/images/122502_03.gif" bgproperties="fixed">



<div class=a id=1 style="width: 400; height: 105">wordsgohere</div>



<div class=b id=2 onmouseover="st1(20,2)" onmouseout="st2(80,2)"></div>



<div class=c id=3 onmouseover="st1(20,3)" onmouseout="st2(80,3)"></div>



<div class=d id=4 onmouseover="st1(20,4)" onmouseout="st2(80,4)"></div>



<div class=e id=5 onmouseover="st1(20,5)" onmouseout="st2(80,5)"></div>



<div class=g id=7 style="cursor:w-resize" ></div>

<script>


aus();
function st1(a,id){
i=a;i+=19;
document.getElementById(id).style.letterSpacing=i/9;
document.getElementById(id).style.filter='alpha(opacity='+i+')';
if (i<90){setTimeout('st1('+i+','+id+')',1)}return(i)}

function st2(a,id){
i=a;i-=5;
document.getElementById(id).style.letterSpacing=i/13
document.getElementById(id).style.filter='alpha(opacity='+i+')';

if (i>50){setTimeout('st2('+i+','+id+')',1)}}
function aus(){
for (z=1;z<=5;z++){
document.getElementById(z).style.filter='alpha(opacity=60)';
document.getElementById(z).style.letterSpacing=2;
document.getElementById(7).style.filter='progid:DXImageTransform.Microsoft.Shadow(direction=130,color=black,strength=5)'}
}
;

</script>


</body>

VanHost
08-31-2003, 02:30 PM
In the 2 working examples above, they are both using layers using the DIV tag. I can't remember all the browsers, but it is not supported by quite a few of them.

You may want to check compatibility!

Thanks.

lost2
08-31-2003, 02:52 PM
ok.. but i been playing with the coding and you don't need to use the DIV this is using styles

now i'm lookin into DXImageTransform opacity

lost2
08-31-2003, 03:49 PM
CHECK IT !!! I DON DONE IT !! YAY !!

i found out how to do it and its using CSS style or whatever


<style>
.a{border:000000 solid 1px;background: white;filter: alpha(opacity=90); filter: progid:DXImageTransform.Microsoft.Alpha(opacity=90); -moz-opacity: 90%;}
</style>



<table class=a

or

<td class=a

bedlam
08-31-2003, 04:26 PM
Hey,

I don't know if it's relevant to your site/page, but I believe this is an IE only possibility..

B

lost2
08-31-2003, 04:56 PM
its ko.. cuz what may happen if it don't work ? the default correct ? also i've checked my statistics and 96.89 % (103266) people on my site use IE

but i appreciate you tellin me this, good lookin
;)

El Nino
08-31-2003, 07:09 PM
If you do it using the CSS styles, the text in the <table> or <td> is also affected by the opacity. The result would be similar to the link I posted above. Everything in the table on the left is affected by the 80% opacity while the table on the right only the background is 80% while the text (and images) themselves are unaffected.

lost2
08-31-2003, 07:38 PM
hu.. i'm not sure about all that but i do know i got what i wanted.. now i'm trying to find the coding for the shadow.. i did it by mistake.. then i lost it.. now i'm lookin again.. i'm searching in microsoft site .. have any of yall worked with MSDN ?

El Nino
08-31-2003, 08:37 PM
I guess it all depends on how your are designing your site. If you set the ocpacity to 10%, the table AND the text be 10% visable. But, if you use the code for the table on the right side on this page (http://www.option5.net/testing/), only the table background will be 10% and the text will be unchanged (100%).

I highly doubt the shadowing will be on microsoft.com or MSDN, search on google.com for CSS shadow or something like that.

katone
12-13-2005, 09:41 AM
the links are now dead.
I made a table/cell transparent, but what is the code to keep the text visible (NOT transparent) as "Nino" explains above?

Would it be possible to post this code again? (transparent background on table, and text NOT transparent)

thanks!

florinsasioan
12-13-2005, 04:47 PM
El nino is right if you use "alpha(opacity= );" everything in the table will be afected by the opacity, but css might save you

You will use div container to define a color which is transparent and use another div container "position:absolute" to handle the text