There are several reasons this occurs, both attributed to default margin/padding of both the body and the image... Two ways of dealing with this is to open a blank window, document.write the HTML including style to remove the default margin/padding of the body and place the image into a division, once again using style to remove the default margin/padding... Or, much the same as the above, set the image as the body background...
<BASE HREF="http://www.xs4all.be/~chadier/webgallery_1/">
<script type="text/javascript">
<!--//
function display(image,name){
var theImage = new Image();
theImage.src = image+'?'+new Date().getUTCSeconds();
theImage.onerror = function(){
alert('This image has failed to load!');
}
theImage.###### = function(){
var width = theImage.width; if(width <100) { width = 100 };
var height = theImage.height; if(height<100) { height = 100 };
var left = Math.round((screen.width - width) / 2);
var top = Math.round((screen.height - height) / 2);
var features = 'top='+top+',left='+left+',width='+width+',height='+height;
var openWindow = window.open('','display',features);
with(openWindow.document){
writeln('<html><head><title>'+name+'</title></head>');
writeln('<body ######="self.focus()" onblur="self.close()"');
writeln('style="background-image:url('+image+');');
writeln('background-repeat:no-repeat;width:'+width+';height:'+height+'">');
writeln('<div style="position:absolute;bottom:3px;text-align:center">');
writeln('<span style="font-size:12px;width:100%">');
writeln('<a href="javascript:self.close()">Close</a>');
writeln('</span></div></body></html>');
close();
}
}
return false;
}
//-->
</script>
</head>
<body>
<a href="images/17.jpg" name="Classic Table"
onclick="return display(this.href,this.name)">
<img src="thumbnails/17.jpg" width="55" height="70"></a>
<a href="images/18.jpg" name="Wrought Iron Table"
onclick="return display(this.href,this.name)">
<img src="thumbnails/18.jpg" width="55" height="70"></a>
<a href="images/19.jpg" Name="Wrought Iron Sculpture"
onclick="return display(this.href,this.name)">
<img src="thumbnails/19.jpg" width="55" height="70"></a>
I'm not sure if this is the most recent example of this popup code that I have... I know I have fixed a bug which occurs when the same image is called twice in a row and is cached and thus the ###### does not fire.... Not sure if this is the updated version and I am too lazy to look any further unless I know this is what you want...
Once again...
