Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Nov 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Transparent/Translucent tables, And how to preload images

    i've been trying to make a table for my website transparent/translucent, but i can't figure out how to do it. Here's the Code.

    Code:
    <html>
    <head>
    <title>Screenbreaker</title>
    
        <link rel="shortcut icon" href="icon.ico" type="image/vnd.microsoft.icon">
        <link rel="icon" href="icon.ico" type="image/vnd.microsoft.icon">
    
    
    <script type="text/javascript">
    
            var glowing = false;
    
          function showElement(show) {
            document.getElementById(show).style.display="block";
            return;
          }
    
          function hideElement(hide) {
            document.getElementById(hide).style.display="none";
            return;
          }
    
          function toggleVisibility(objectID) {
    	  var object =
    	  	document.getElementById(objectID);
    	  	state = object.style.display;
    	  	if (state == 'block')
    	  		object.style.display = 'none';
    	  	else
    	  		object.style.display = 'block';
          }
    
    </script>
    
    <script language="javascript">
    var pos=190;
    
    function Scroll() {
      if (!document.getElementById) return;
      obj=document.getElementById("thetext");
      pos -=1;
      if (pos < 0-obj.offsetHeight+8) pos = 190;
      obj.style.top=pos;
      window.setTimeout("Scroll();",30);
    }
    
    window.onload = Scroll;
    </script>
    
    
    
    <style>
    #a{text-decoration: none; color: #FF3300; font-size: 18; font-family: arial;background: url('normbutton.png');}
    #a:hover{background: url('normbuttonover.png'); background-position: 0 -3}
    #nav{float: left; width: 150px; top: 150px}
    a{color: #999999; text-decoration: none}
    a:hover{color: #FF6600;}
    p{color: #666666; font-family:times new roman;}
    #thewindow {
      position:relative;
      width:200;
      height:150;
      overflow:hidden;
      border: 2px solid #CCCCCC;
      background-color: white;
    }
    #thetext {
      position: absolute;
      width: 170;
      left: 20;
      top: 100;
    }
    #as{text-decoration: none; color: #FF6600; font-size: 18; font-family: arial;background: url('currentbutton.png');cursor:default;}
    #as a:hover{text-decoration: none; color:red; background: url('currentbuttonover.png');}
    #close {font-size: 11px; float: right;}
    #link:hover, #link2:hover {text-decoration: none;}
    h3{color:#999999;}
    #link, #close{cursor: pointer; font-family: times new roman}
    #link2{cursor: pointer; font-family: times new roman; display: none;}
    body {background-color:#333333;background: url('DesktopBackground.bmp'); }
    #menu_items {width: 85px; color: black; display: none; position: absolute; border-style: solid; border-color: #CCCCCC; background-color: white; overflow:auto; height:100px;}
    
    #menu {border-style: solid; color: black;}
    
    #menu_div {width: 50px; border-style: solid; border-color: #CCCCCC; color: #FF6600; background-color: white;}
    span {color: CC3300;}
    hr {color: silver;}
    #header{ background-color:#CCCCCC;background: url('headerbackground.png'); border:2px solid #CC3300;}
    </style>
    </head>
    <body>
    <div width="100%" height="20px" style="background: url('topbackground.png');">
    <span style="color:white;font-family:courier;font-size:8;"><- go back to <a href="http://www.screenbreaker.com/">screenbreaker.com</a></span>
    </div>
    <br><br><br><br><br>
    <table align="center" style=" background-color:White; border-color: #CC3300; border-style: solid;"  width="650px">
    <tr>
    <td id="header"colspan="2">
    
    <br>
    <div align="center">
    <a href="Start[1].html" border="no" ><img src="banner.png"border="none"></a>
    </div>
    
    <span id="as">&nbsp;&nbsp;&nbsp;&nbsp;home&nbsp;&nbsp;&nbsp;&nbsp;</span>
    <a href="Start[1].html" id="a">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;play&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
    <a href="About.html" id="a">&nbsp;&nbsp;&nbsp;&nbsp;about&nbsp;&nbsp;&nbsp;&nbsp;</a>
    <a href="Contact.html" id="a">&nbsp;&nbsp;contact&nbsp;&nbsp;&nbsp;</a>
    
    </td>
    </tr>
    
    <td>
    
    <div id="thewindow">
    <div id="thetext">
    
    <h3 style="color:#FF6600;">Welcome to Aucune</h3>
    
    <span> Welcome to the Aucune website. Check out Aucune! <a href="Start[1].html">Click Here</a></span>
    
    </div>
    </div>
    
    
    </td>
    <td style="background-color: white;">
    
    <p class="a">Got a good idea for an update? <a href="mailto:zehgamemaker@screenbreaker.com">Click here</a> to email your idea.</p>
    
    </td>
    </tr>
    <tr><td colspan="2" align="center">
    
    <span align="center">
        <a href="#" id="link"onClick="toggleVisibility('cool'); hideElement('link'); showElement('link2');">[show announcements]</a>
        <a href="#" id="link2"onClick="toggleVisibility('cool'); hideElement('link2'); showElement('link');">[hide announcements]</a>
    </p>
    
    </td></tr>
    <tr>
    <td colspan="2">
    
    <br>
    <hr />
    
    <span style="font-family:Time New Roman; color: silver;">
    
    <a href="index.html">Home</a> |
    <a href="Start[1].html">Play</a> |
    <a href="About.html">About us</a> |
    <a href="Contact.html">Contact us</a>
    
    </span>
    
    <hr style="color: silver" />
    
    <span style="font-family:Time New Roman;">Copyright&copy 2007 Screen-Breaker&trade;<br> No Material May be reproduced without written permission<br><a href="mailto:isvidler@screenbreaker.com">Contact the webmaster</a></span>
    </td></table>
    
    <div align="center" id="cool" style="border-style: solid; background-color: white; border-color: silver; display: none; height:213px; width:221px;position:absolute; left:2;top:45;">
    
    
    
        <div align="center"style="height:200px; width:220px; overflow:auto;">
    
            <h3>Announcements:</h3>
    
            <p>Screenbreaker.com is proud to present Galaxie Infinie. Galaxie Infinie is a great Game we know you'll enjoy! This Infinit Galaxy (*cough* *cough* Hint! *cough* *cough*) takes place in the future, year 50,412. Create and customize your own character and you can do almost anything (Even fly! But only at the set speed limit... Even the future has laws...)!
        </div>
    
        <a href="#" id="close" onClick="toggleVisibility('cool'); hideElement('link2'); showElement('link');">close</a>
    
    </div>
    
    </body>
    </html>
    Here's a link to the webpage:

    http://www.aucuneslimites.screenbrea...ticeindex.html

    I also want to be able to preload an image (my background) because its a big image and takes a long time to load, so, any ideas???
    Last edited by livingproof; 11-24-2008 at 12:05 AM.

  • #2
    Senior Coder gnomeontherun's Avatar
    Join Date
    Sep 2007
    Location
    Houston
    Posts
    2,846
    Thanks
    10
    Thanked 238 Times in 229 Posts
    Well you can't really preload the image until the page is opened, meaning that you are better off finding a way to reduce the size of that image.

    There are some transparency attributes for CSS that work in some browsers at least, the latest ones.

    www.mandarindesign.com/opacity.html
    jeremy - gnomeontherun
    Educated questions often get educated answers, and simple questions often get simple answers.

  • #3
    New to the CF scene
    Join Date
    Nov 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks! I honestly didn't think it would be that simple.

  • #4
    Senior Coder gnomeontherun's Avatar
    Join Date
    Sep 2007
    Location
    Houston
    Posts
    2,846
    Thanks
    10
    Thanked 238 Times in 229 Posts
    Sometimes it can be, and other things just are never that simple...
    jeremy - gnomeontherun
    Educated questions often get educated answers, and simple questions often get simple answers.


  •  

    Tags for this Thread

    Posting Permissions

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