Hi there phrozen,
Here is an example...
http://mysite.orange.co.uk/coothead/pop_up_gallery/links.html
This is the code...
links.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>pop up to fit image</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
html,body {
margin:0px;
padding:0px;
background-image:url('bodyBg.jpg');
}
#links {
position:absolute;
top:20px;
left:20px;
width:70px;
padding-top:4px;
border:solid 1px #000;
background-color:#335;
color:#000;
}
#links img {
display:block;
width:60px;
height:60px;
border:solid 1px #000;
margin:0px 4px 4px 4px;
}
</style>
<script type="text/javascript">
var mywindow;
/*this array has the width and height of the images*/
var dims=new Array();
dims[0]='400,432';
dims[1]='360,280';
dims[2]='200,200';
dims[3]='445,240';
dims[4]='360,280';
dims[5]='347,201';
dims[6]='640,400';
dims[7]='740,514';
dims[8]='300,300';
window.onload=function() {
lnk=document.getElementById('links').getElementsByTagName('a');
for(c=0;c<lnk.length;c++) {
lnk[c].id='a'+c;
lnk[c].onclick=function() {
n=this.id.split('a')[1];
w=dims[n].split(',')[0];
h=dims[n].split(',')[1];
url='page.html?'+this.href;
l=(screen.width-w)/2;
t=(screen.height-h)/2;
features='width='+w+',height='+h+',left='+l+',top='+t;
if(mywindow) {
mywindow.close();
}
mywindow=window.open(url,'',features);
mywindow.focus();
return false;
}
}
}
</script>
</head>
<body>
<div id="links">
<a href="dog.jpg"><img src="dog_thumb.jpg" alt="" /></a>
<a href="banana.jpg"><img src="banana_thumb.jpg" alt=""/></a>
<a href="aaa.jpg"><img src="aaa_thumb.jpg" alt=""/></a>
<a href="ten_quid.jpg"><img src="ten_quid_thumb.jpg" alt=""/></a>
<a href="apple.jpg"><img src="apple_thumb.jpg" alt=""/></a>
<a href="girl.jpg"><img src="girl_thumb.jpg" alt=""/></a>
<a href="clouds.jpg"><img src="clouds_thumb.jpg" alt=""/></a>
<a href="grap.jpg"><img src="grap_thumb.jpg" alt=""/></a>
<a href="ball_shad.jpg"><img src="ball_shad_thumb.jpg" alt=""/></a>
</div>
</body>
</html>
page.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body {
margin:0;
padding:0;
}
</style>
<script type="text/javascript">
onload=function() {
pic=location.href.split('?')[1];
document.getElementById('image').src=pic;
}
</script>
</head>
<body>
<div>
<img id="image" src="" alt=""/>
</div>
</body>
</html>