Why didn't you do exactly what they did? Here's their code:
[HTML]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<style>
body {
background-image: url(skin_images/background.gif);
/*setting the main body background!!! ussualy it's an image;)*/
}
.logo {
position: absolute; /*the positioning of all objects in the logo (can be
absolute, relative, fixed)*/
left: 5%; /*the logo is set to left 5%, in this way it'll fit
exactly in the middle of the page*/
margin: 20px auto 0px auto; /*margins, in this order: margin-top, margin-right, margin-
bottom, margin-left*/
padding: 6px 6px 6px 6px; /*padding settings are set for increasing readability!!! in
our case they are set for making some space between the
border of the div and the current text*/
background-color: #ffffff; /*background-color of the main div*/
width: 90%; /*the width of the main div*/
filter: alpha(opacity=60); /*this is for opacity in IE (Internet Explorer)*/
opacity: 0.6; /*this is for opacity in Mozilla*/
border: 1px solid #000000; /*the border proprieties you can change, by changing:
weight, border type, color*/
}
.logo img {
width: 100%; /*setting the width of the logo image, to fit the whole
space in the logo div */
filter: alpha(opacity=100); /*this is for opacity in IE (Internet Explorer)*/
opacity: 1; /*this is for opacity in Mozilla*/
}
#attention {
position: relative;
width: 100px
}
.maindiv {
position: absolute; /*the positioning of all objects in the main div (can be
absolute, relative, fixed)*/
left: 5%; /*the main div is set to left 5%, in this way it'll fit
exactly in the middle of the page*/
top: 40%;
background-color: #ffffff; /*background-color of the main div*/
padding: 6px 6px 6px 6px; /*padding settings are set for increasing readability!!! in
our case they are set for making some space between the
border of the div and the current text*/
width: 90%; /*the width of the main div*/
filter: alpha(opacity=60); /*this is for opacity in IE (Internet Explorer)*/
opacity: 0.6; /*this is for opacity in Mozilla*/
border: 1px solid #000000; /*the border proprieties you can change, by changing:
weight, border type, color*/
text-align: center;
font-size: 60pt;
font-family: ACQUAINTANCE, Calibri;
color: rgb(95,101,29);
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>TarakanRocker</title>
<base href="http://trr.sytes.net/mars/skin_images/" />
</head>
<body>
<div class="logo">
<a href="/mars/"><img src="logo4.jpg"
style="opacity: 0.6;filter: alpha(opacity=60);"
onmouseover="this.style.MozOpacity=1;this.filters. alpha.opacity=100"
onmouseout="this.style.MozOpacity=0.6; this.filters.alpha.opacity=60"></a>
</div>
<div class="maindiv">
<img id="attention" src="http://trr.sytes.net/mars/skin_images/attention.png"><br>
Site under construction!
</div>
</body>
</html>[/HTML]
They didn't use CSS to change it, they used two attributes called onMouseOver, and onMouseOut. So it was done using JavaScript.
To get the same effect on your page use this.
[HTML]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/2002/REC-xhtml1-20020801/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<title>TarakanRocker</title>
<style type="text/css">
body {
background-color:#444;
}
.logo {
position: absolute;
left: 5%;
margin: 20px auto 0px auto;
padding: 6px 6px 6px 6px;
background-color: #ffffff;
width: 90%;
filter: alpha(opacity=60);
opacity: 0.6;
border: 1px solid #000000;
}
.logo img {
width: 100%;
filter: alpha(opacity=100);
opacity: 1;
}
</style>
</head>
<body>
<div class="logo">
<a href="/mars/"><img src="logo4.jpg"
style="opacity: 0.6;filter: alpha(opacity=60);"
onmouseover="this.style.MozOpacity=1;this.filters. alpha.opacity=100"
onmouseout="this.style.MozOpacity=
0.6;this.filters.alpha.opacity=60" alt="Logo" />
</a>
</div>
</body>
</html>[/HTML]
I took out the comments, and endented my own way (couldn't stand the way they had it). Also I made it valid
XHTML (It's not the greatest explination, so if you have any questions on XHTML just ask).
Hope it helps, Thanks, Death
5
