livingproof
11-23-2008, 07: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"> home </span>
<a href="Start[1].html" id="a"> play </a>
<a href="About.html" id="a"> about </a>
<a href="Contact.html" id="a"> contact </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© 2007 Screen-Breaker™<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???
<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"> home </span>
<a href="Start[1].html" id="a"> play </a>
<a href="About.html" id="a"> about </a>
<a href="Contact.html" id="a"> contact </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© 2007 Screen-Breaker™<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???