Results 1 to 19 of 19
  1. #1

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

    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

  2. #2
    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

  3. #3
    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.

    "Simple Hosting Solutions For Real People"
    http://www.pharkus.com
    pharkus@pharkus.com
    PayPal :: Money Order :: Check

  4. #4
    Join Date
    Aug 2001
    Location
    NE Ohio
    Posts
    502
    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.

  5. #5
    Join Date
    Aug 2003
    Location
    Pune, India
    Posts
    17
    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...

  6. #6
    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.
    SuperWebHost.com, a Digitally Justified Company
    Celebrating our 9th year in Business

    Proudly Hosting with CANADIAN bandwidth
    Managed Hosting, Multi-Domain Hosting, Colocation, Merchant Accounts

  7. #7
    Join Date
    Aug 2001
    Location
    NE Ohio
    Posts
    502
    I found this example website, is this what you're trying to do?
    http://www.option5.net/testing/

  8. #8
    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

  9. #9
    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:absoluteheight: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> 

  10. #10
    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.
    SuperWebHost.com, a Digitally Justified Company
    Celebrating our 9th year in Business

    Proudly Hosting with CANADIAN bandwidth
    Managed Hosting, Multi-Domain Hosting, Colocation, Merchant Accounts

  11. #11
    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

  12. #12
    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=

  13. #13
    Join Date
    Apr 2003
    Posts
    126
    Hey,

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

    B

  14. #14
    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

  15. #15
    Join Date
    Aug 2001
    Location
    NE Ohio
    Posts
    502
    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.

  16. #16
    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 ?

  17. #17
    Join Date
    Aug 2001
    Location
    NE Ohio
    Posts
    502
    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, 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.
    Last edited by El Nino; 08-31-2003 at 09:03 PM.

  18. #18
    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!

  19. #19
    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

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •