...

View Full Version : Resolved Transparent/Translucent tables, And how to preload images



livingproof
11-23-2008, 08:24 PM
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.



<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.screenbreaker.com/practiceindex.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???

gnomeontherun
11-23-2008, 11:03 PM
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

livingproof
11-24-2008, 12:06 AM
Thanks! I honestly didn't think it would be that simple.

gnomeontherun
11-24-2008, 12:08 AM
Sometimes it can be, and other things just are never that simple...:thumbsup:



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum