Table Cell Opacity / Transparent ??????????

lost2 · #1 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 · #2 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 · #3 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.

El Nino · #4 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 · #5 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 · #6 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 · #7 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 · #8 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 · #9 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

PHP Code:


			
<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 · #10 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 · #11 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 · #12 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

Code:

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

PHP Code:


			
<table class=a



or



<td class=a

bedlam · #13 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 · #14 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 · #15 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.

Table Cell Opacity / Transparent ??????????

Sponsored Links

Advertise Here

Internet Services

Web Development

Digital Marketing

Consumer Tech