Nøjagtig placering af billeder
Som det ses i nedenstående kode har både #img-container & #stortbillede fast bredde og højde (500px * 500px). Grunden til det er at #stortbillede er placeret lige under #img-container og for at opnå følgende effekt: #img-container indeholder 25 små udsnit af hver deres store billede (#stortbillede), og når der klikkes på et af disse små billeder forsvinder de resterende 24 små udsnit i #img-container og det store billede der svarer til netop det udsnit der blev klikket på kommer til syne. Men det er ikke alle 25 store billeder der er 500*500 px, så for at det skal fungere rigtigt, er det meget vigtigt, at de store billeder der kommer til syne under #img-container, er placeret nøjagtigt i midten både vertikalt og horizontalt i forhold til #img-container. Og hvordan gøres det i nedenstående kode?<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;
}
#picdscrp
{
position:absolute;
top:0px;
left:0px;
float:left;
width:100px;
height:100px;
border:0;
background-color:pink;
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"),idT=elm.title,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" + idT);//her har jeg testet at det der skrives i title medtages, men jeg kan så ikke få det det rigtige sted hen
document.images['stortbillede'].src = "billede" + id + ".jpg";
txt = idT;
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>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</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" title="Dette er en bil">
<img name="lillebillede2" id="lillebillede2" src="2.jpg" class="lilbill" title="blablabla2" style="left:100px;">
<img name="lillebillede3" id="lillebillede3" src="3.jpg" class="lilbill" title="blablabla3" style="left:200px;">
<img name="lillebillede4" id="lillebillede4" src="4.jpg" class="lilbill" title="blablabla4" style="left:300px;">
<img name="lillebillede5" id="lillebillede5" src="5.jpg" class="lilbill" title="blablabla5" style="left:400px;">
<img name="lillebillede6" id="lillebillede6" src="6.jpg" class="lilbill" title="blablabla6" style="top:100px;">
<img name="lillebillede7" id="lillebillede7" src="7.jpg" class="lilbill" title="blablabla7" style="top:100px;left:100px;">
<img name="lillebillede8" id="lillebillede8" src="8.jpg" class="lilbill" title="blablabla8" style="top:100px;left:200px;">
<img name="lillebillede9" id="lillebillede9" src="9.jpg" class="lilbill" title="blablabla9" style="top:100px;left:300px;">
<img name="lillebillede10" id="lillebillede10" src="10.jpg" class="lilbill" title="blablabla10" style="top:100px;left:400px;">
<img name="lillebillede11" id="lillebillede11" src="11.jpg" class="lilbill" title="blablabla11" style="top:200px;">
<img name="lillebillede12" id="lillebillede12" src="12.jpg" class="lilbill" title="blablabla12" style="top:200px;left:100px;">
<img name="lillebillede13" id="lillebillede13" src="13.jpg" class="lilbill" title="blablabla13" style="top:200px;left:200px;">
<img name="lillebillede14" id="lillebillede14" src="14.jpg" class="lilbill" title="blablabla14" style="top:200px;left:300px;">
<img name="lillebillede15" id="lillebillede15" src="15.jpg" class="lilbill" title="blablabla15" style="top:200px;left:400px;">
<img name="lillebillede16" id="lillebillede16" src="16.jpg" class="lilbill" title="blablabla16" style="top:300px;">
<img name="lillebillede17" id="lillebillede17" src="17.jpg" class="lilbill" title="blablabla17" style="top:300px;left:100px;">
<img name="lillebillede18" id="lillebillede18" src="18.jpg" class="lilbill" title="blablabla18" style="top:300px;left:200px;">
<img name="lillebillede19" id="lillebillede19" src="19.jpg" class="lilbill" title="blablabla19" style="top:300px;left:300px;">
<img name="lillebillede20" id="lillebillede20" src="20.jpg" class="lilbill" title="blablabla20" style="top:300px;left:400px;">
<img name="lillebillede21" id="lillebillede21" src="21.jpg" class="lilbill" title="blablabla21" style="top:400px;">
<img name="lillebillede22" id="lillebillede22" src="22.jpg" class="lilbill" title="blablabla22" style="top:400px;left:100px;">
<img name="lillebillede23" id="lillebillede23" src="23.jpg" class="lilbill" title="blablabla23" style="top:400px;left:200px;">
<img name="lillebillede24" id="lillebillede24" src="24.jpg" class="lilbill" title="blablabla24" style="top:400px;left:300px;">
<img name="lillebillede25" id="lillebillede25" src="25.jpg" class="lilbill" title="blablabla25" 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>
