Måske sådan noget:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"
http://www.w3.org/TR/html4/loose.dtd"><html>
<head>
<title>Vis baggrund gradvist</title>
<meta name="Generator" content="Stone's WebWriter 4">
<meta name="keywords" content="roenving,
http://www.eksperten.dk/spm/615092"><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
html,body{height:100%;margin:0px;border:0px;padding:0px;font-family:tahoma,verdana,arial,sans-serif;font-size:small;}
</style>
<script language="javascript" type="text/javascript">
var actElm = [];
function fadeElm(elm,stWidth){
this.actElm = elm;
this.width = stWidth;
this.event = null;
this.direction = 0;
this.show = function(){
if(this.direction == -1)
clearInterval(this.event);
this.direction = 1;
//alert(this.actElm.tagName);
var me = this;
this.event = setInterval(function(){me.chBgLength(5)},20);
}
this.hide = function(){
if(this.direction == 1)
clearInterval(this.event);
this.direction = -1;
var me = this;
this.event = setInterval(function(){me.chBgLength(-5)},20);
}
}
function showColor(elm,mode){
elm = elm.parentNode.previousSibling;
var nodeFound = null;
for(var i=0;actElm.length>i;i++){
if(actElm[i].actElm == elm){
nodeFound = actElm[i];
break;
}
}
if(nodeFound){
if(nodeFound.direction == 1 && mode || nodeFound.direction == -1 && !mode)
return;
}else{
nodeFound = new fadeElm(elm,mode?0:100);
actElm[actElm.length] = nodeFound;
}
if(mode)
nodeFound.show();
else
nodeFound.hide();
}
fadeElm.prototype.chBgLength = function(dir){
this.width = Math.abs(this.width + dir);
this.actElm.style.width = this.width + "%";
if(this.width == 100 || this.width == 0){
clearInterval(this.event);
this.direction = 0;
//oprydning i objekter ?-)
}
}
</script>
</head>
<body>
<div style="width:155px;">
<div style="position:relative;width:100%;">
<div style="position:absolute;top=0;width:0%;background:#1f6;"></div>
<div style="position:relative;width:100%;">
<a href="etLink" style="display:block;" onmouseover="showColor(this,true);" onmouseout="showColor(this,false);">Et link</a>
</div>
</div>
<div style="position:relative;width:100%;">
<div style="position:absolute;top=0;width:0%;background:#00f;"></div>
<div style="position:relative;width:100%;">
<a href="etLink" style="display:block;" onmouseover="showColor(this,true);" onmouseout="showColor(this,false);">Et link</a>
</div>
</div>
<div style="position:relative;width:100%;">
<div style="position:absolute;top=0;width:0%;background:#f77;"></div>
<div style="position:relative;width:100%;">
<a href="etLink" style="display:block;" onmouseover="showColor(this,true);" onmouseout="showColor(this,false);">Et link</a>
</div>
</div>
<div style="position:relative;width:100%;">
<div style="position:absolute;top=0;width:0%;background:#065;"></div>
<div style="position:relative;width:100%;">
<a href="etLink" style="display:block;" onmouseover="showColor(this,true);" onmouseout="showColor(this,false);">Et link</a>
</div>
</div>
<div style="position:relative;width:100%;">
<div style="position:absolute;top=0;width:0%;background:#ff0;"></div>
<div style="position:relative;width:100%;">
<a href="etLink" style="display:block;" onmouseover="showColor(this,true);" onmouseout="showColor(this,false);">Et link</a>
</div>
</div>
</div><br>
</body>
</html>
Ny bruger
Nybegynder
Opret
Preview
