Og her er kode:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"
http://www.w3.org/TR/html4/loose.dtd"><html>
<head>
<title>none</title>
<style type="text/css">
html,body{height:100%;border:0;margin:0;padding:0;font-family:verdana;}
#img-container{
position:relative;
width:500px;
height:500px;
padding:0px;
}
#stortbillede{
position:absolute;
top:0px;
left:0px;
width:500px;
height:500px;
z-index:-1;
}
.lilbill{
position:absolute;
top:0px;
left:0px;
float:left;
width:100px;
height:100px;
z-index:1;
border:0;
margin:0;
padding:0;
}
</style>
<script type="text/javascript">
function applyOnclick(){
var img = document.images;
for(i=0;img.length>i;i++){
if(img[i].className=='lilbill'){
img[i].onclick = function(){showBig(this);}
}
}
}
var raekkefolge,num,intId,ny = true;
function showBig(elm){
if(ny)ny = !ny;
else return;
var id=elm.name.replace(/^.*?(\d+)$/,"$1"),tmp,n;
num = 0;
raekkefolge = new Array();
for(i=0;25>i;i++)raekkefolge[i] = i+1;
for(i=0;25>i;i++){
n = Math.floor(Math.random()*raekkefolge.length);
tmp = raekkefolge[i];
raekkefolge[i] = raekkefolge[n];
raekkefolge[n] = tmp;
setTimeout("document.getElementById('visForsideLink').style.display = 'inline';",3000);
}
//alert("billede" + id + ".jpg");
document.images['stortbillede'].src = "billede" + id + ".jpg";
intId = setInterval('hideSmall()',80);
}
function hideSmall(){
document.getElementById('lillebillede'+raekkefolge[num++]).style.display='none';
if(num==25){clearInterval(intId);ny = true;}
}
window.onload = applyOnclick;
</script>
</head>
<body>
<table align="center">
<tr>
<td>
<div id="img-container"> <img name="stortbillede" id="stortbillede" src="default.jpg">
<img name="lillebillede1" id="lillebillede1" src="1.jpg" class="lilbill">
<img name="lillebillede2" id="lillebillede2" src="2.jpg" class="lilbill" style="left:100px;">
<img name="lillebillede3" id="lillebillede3" src="3.jpg" class="lilbill" style="left:200px;">
<img name="lillebillede4" id="lillebillede4" src="4.jpg" class="lilbill" style="left:300px;">
<img name="lillebillede5" id="lillebillede5" src="5.jpg" class="lilbill" style="left:400px;">
<img name="lillebillede6" id="lillebillede6" src="6.jpg" class="lilbill" style="top:100px;">
<img name="lillebillede7" id="lillebillede7" src="7.jpg" class="lilbill" style="top:100px;left:100px;">
<img name="lillebillede8" id="lillebillede8" src="8.jpg" class="lilbill" style="top:100px;left:200px;">
<img name="lillebillede9" id="lillebillede9" src="9.jpg" class="lilbill" style="top:100px;left:300px;">
<img name="lillebillede10" id="lillebillede10" src="10.jpg" class="lilbill" style="top:100px;left:400px;">
<img name="lillebillede11" id="lillebillede11" src="11.jpg" class="lilbill" style="top:200px;">
<img name="lillebillede12" id="lillebillede12" src="12.jpg" class="lilbill" style="top:200px;left:100px;">
<img name="lillebillede13" id="lillebillede13" src="13.jpg" class="lilbill" style="top:200px;left:200px;">
<img name="lillebillede14" id="lillebillede14" src="14.jpg" class="lilbill" style="top:200px;left:300px;">
<img name="lillebillede15" id="lillebillede15" src="15.jpg" class="lilbill" style="top:200px;left:400px;">
<img name="lillebillede16" id="lillebillede16" src="16.jpg" class="lilbill" style="top:300px;">
<img name="lillebillede17" id="lillebillede17" src="17.jpg" class="lilbill" style="top:300px;left:100px;">
<img name="lillebillede18" id="lillebillede18" src="18.jpg" class="lilbill" style="top:300px;left:200px;">
<img name="lillebillede19" id="lillebillede19" src="19.jpg" class="lilbill" style="top:300px;left:300px;">
<img name="lillebillede20" id="lillebillede20" src="20.jpg" class="lilbill" style="top:300px;left:400px;">
<img name="lillebillede21" id="lillebillede21" src="21.jpg" class="lilbill" style="top:400px;">
<img name="lillebillede22" id="lillebillede22" src="22.jpg" class="lilbill" style="top:400px;left:100px;">
<img name="lillebillede23" id="lillebillede23" src="23.jpg" class="lilbill" style="top:400px;left:200px;">
<img name="lillebillede24" id="lillebillede24" src="24.jpg" class="lilbill" style="top:400px;left:300px;">
<img name="lillebillede25" id="lillebillede25" src="25.jpg" class="lilbill" style="top:400px;left:400px;">
</div>
</td>
</tr>
<tr>
<td align="center">
<a href="#" id="visForsideLink" onclick="for(i=1;26>i;i++){document.getElementById('lillebillede'+i).style.display='inline';};this.style.display='none';return false;" style="display:none;">til galleri</a>
</td>
</tr>
</table>
</body>
</html>
