how can i avoid the flickering rollover-effect on my site: http://www.gruenwalderhof.at?
i tried preloading the background image, but i don't really know how to implement it - the preload doesn't work.
this is my template:
Code: Select all
{process_pagedata}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<__html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>{sitename} - {title}</title>
{metadata}
{stylesheet}
{literal}
<__script__ type="text/JavaScript">
<!--
//pass min and max - measured against window width
function P7_MinMaxW(a,b){
var nw="auto",w=document.documentElement.clientWidth;
if(w>=b){nw=b+"px";}if(w<=a){nw=a+"px";}return nw;
}
//-->
</__script>
<__script__ language="javascript">
<!--
var myimages=new Array()
function preloadimages(){
for (i=0;i<preloadimages.arguments.length;i++){
myimages[i]=new Image()
myimages[i].src=preloadimages.arguments[i]
}
}
preloadimages("uploads/images/startbild/start_hg.gif");
//--></__script>
<!--[if lte IE 6]>
<style type="text/css">
#pagewrapper {width:expression(P7_MinMaxW(1024,1200));}
#container {height: 1%;}
</style>
<![endif]-->
{/literal}
{* The min and max page width for Internet Explorer is set here. For other browsers it's in the stylesheet "Layout: Left sidebar + 1 column" *}
</head>
</__body onload="preloadimages()">
<div id="pagewrapper">
{* Start Content *}
<div id="content">
<div id="bild_oben">
</div>
<div id="bildmitte">
<div id="mittelinks">
<a href="{cms_selflink href="willkommen"}" title="" id="willkomm" tabindex="1"></a>
</div>
<div id="raute">
</div>
<div id="mitterechts">
<a href="{cms_selflink href="welcome"}" title="" id="welcom" tabindex="2"></a>
</div>
</div>
<div id="bild_unten">
</div>
{content}
</div>
{* End Content Area *}
<div class="clear"></div>
</div>
</div>
<__body>
</__html>Code: Select all
* {
margin: 0;
padding: 0;
}
body {
text-align: left;
font-family: "Lucida Sans", Verdana, Arial, Helvetica, sans-serif;
font-size: 85.01%;
line-height: 1em;
background: #fffcd8;
}
div {
font-size: 1em;
}
img {
border: 0;
}
a, a:link a:active {
text-decoration: underline;
color: #695738;
}
a:visited {
text-decoration: underline;
color: #bfb29d;
}
a:hover {
text-decoration: none;
color: #86775d;
}
/*****************basic layout *****************/
body {
margin: 0;
padding: 0;
color: #86775d;
background: url(uploads/images/startbild/start_hg.gif)no-repeat center top;
}
div#pagewrapper {
width: 1024px;
margin: 0 auto;
background-color: #fffcd8;
color: #86775d;
}
div#header {
height: 230px;
margin: 0;
padding: 0;
}
div#bild_oben {
background: url(uploads/images/startbild/wald_oben.gif) no-repeat left top;
height:306px;
}
div#bildmitte {
height:158px;
width:148px;
}
div#mittelinks {
width:438px;
height:158px;
margin-top:-1px;
}
div#mitterechts {
width:438px;
height:158px;
margin-left:586px;
margin-top:-158px;
}
div#raute {
background: url(uploads/images/startbild/raute_passiv.gif) no-repeat left top;
height:158px;
width:148px;
margin-left:438px;
margin-top:-158px;
}
a#willkomm {
background: transparent url(uploads/images/startbild/willkommen_passiv.gif) no-repeat;
display: block;
background-image: url(uploads/images/startbild/willkommen_passiv.gif) no-repeat left top;
width:438px;
height:158px;
}
a:hover#willkomm {
background: transparent url(uploads/images/startbild/willkommen_aktiv.gif) no-repeat;
display: block;
width:438px;
height:158px;
}
a#welcom {
background: transparent url(uploads/images/startbild/welcome_passiv.gif) no-repeat;
display: block;
width:438px;
height:158px;
}
a:hover#welcom {
background: transparent url(uploads/images/startbild/welcome_aktiv.gif) no-repeat;
display: block;
width:438px;
height:158px;
}
div#bild_unten {
background: url(uploads/images/startbild/wald_unten.gif) no-repeat left top;
height: 304px;
clear: both;
margin-top:-1px;
}
div#header h1 {
margin: 0;
padding: 0;
line-height: 0;
font-size: 0;
position: inline;
background: url(uploads/videogruen/muster230_00.jpg) no-repeat left top; */
}
div#header h2 {
float: right;
line-height: 1.2em;
font-size: 1.5em;
margin: 35px 65px 0px 0px;
color: #86775d;
text-indent: -999em;
}
div#content {
margin: 0 auto 2em 0;
padding: 0px;
}
/********************CONTENT STYLING*********************/
div#footer {
padding: 0px 10px 0px 20px;
color: #86775d; */
background: url(uploads/ngrey/wtopleft.gif) no-repeat left top; */
}
div.leftfoot {
float: left;
width: 30%;
margin-left: 20px
}
div#footer p {
font-size: 0.7em;
padding: 2em 1em 0px 1em;
text-align: right;
margin: 0;
}
div#footer p a {
color: #86775d;
}
.minitext {
font-size: 0.7em;
}
.minitext_fett {
font-size: 0.7em;
font-weight: bold;
}
code, pre {
white-space: pre-wrap;
white-space: -moz-pre-wrap;
white-space: -pre-wrap;
white-space: -o-pre-wrap;
word-wrap: break-word;
font-family: "Courier New", Courier, monospace;
font-size: 1em;
}
pre {
border: 1px solid #000;
background-color: #ddd;
margin: 0 1em 1em 1em;
padding: 0.5em;
line-height: 1.5em;
font-size: 90%;
}
div.templatecode {
margin: 0 0 2.5em;
}
