Og lige klippet ud og sammen fra linket, så du kan se det i funktion ...
Ideen er, at man sætter den den shadeHolder div udenom den tabel, der skal have skyggen !-)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"
http://www.w3.org/TR/html4/loose.dtd"><html>
<head>
<title> TITLE </title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
.shadeHolder {
position: relative;
}
.shadeTBL {
position: relative;
left: 0px;
top: 0px;
z-index: 5;
background-color: #ffffff;
}
.shader {
position: absolute;
background-color: #000080;
}
</style>
<script type="text/JavaScript">
var startOpacity = 25; // Sæt selv start-opaciteten
var d=document;
function gA(o,tN){return o.getElementsByTagName(tN)}
function pI(s){return parseInt(s)}
function doShade(tbl) {
var w, h, a, offset, opac, cont = (d.all)? tbl.parentElement : tbl.parentNode;
w=pI(tbl.offsetWidth); h=pI(tbl.offsetHeight);
a = new Array();
var steps = (d.all && !window.createPopup)? 1 : 4; // Antal skygge-steps
for (var i=1; i<steps+1; i++) {
offset = i + "px";
opac = startOpacity / i;
a[a.length] = '<img class="shader" src="test_img/t.gif" ';
a[a.length] = 'style="width:'+w+'px;height:'+h+'px;left:'+offset+';top:'+offset+';z-index:'+i+';';
if (d.all) a[a.length] = 'filter:alpha(opacity='+opac+')">';
else a[a.length] = '-moz-opacity:'+(opac/100)+'">';
}
cont.innerHTML += a.join("");
}
function initShadeTBLs() {
if (d.layers) return;
var aTbl = gA(d,"TABLE");
for (var i=0; i<aTbl.length; i++) {
if ( aTbl[i].className=="shadeTBL" ) doShade( aTbl[i] );
}
}
window.onload = initShadeTBLs;
</script>
</head>
<body>
<div class="shadeHolder">
<table class="shadeTBL" cellspacing="0" cellpadding="0" border="3">
<tr>
<td>Lorem ipsum dolor sit amet, consectetur<br>
adipisicing elit, sed do eiusmod tempor incididunt<br>
ut labore et dolore magna aliqua.</td>
</tr>
</table>
</div>
<br><br>
<div class="shadeHolder">
<table class="shadeTBL" cellspacing="0" cellpadding="0" border="3">
<tr>
<td>Ut enim ad minim veniam, quis nostrud<br>
exercitation ullamco laboris nisi ut aliquip ex<br>
ea commodo consequat. Duis aute irure dolor in<br>
reprehenderit in voluptate velit esse cillum</td>
</tr>
</table>
</div>
</body>
</html>
Du skal bruge en 1*1 pixel gif i den farve, du vil skygge med. Her ligger den med stien 'test_img/blue.gif' - det kan du bare rette :)
Ny bruger
Nybegynder
Opret
Preview
