спасибо, с оперой разобрался, только теперь еще возник вопрос, как узнать размеры изображения до вывода его на страницу, просто получается так что оно выводиться в верхнем левом углу а только после onload центрируется, пробовал менять visibility, но это не лучше: появляется скролл, или остается только загружать изображения аяксом, передавая размеры... ниже код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Untitled Document</title>
<script type="text/javascript">
function id(name) {return document.getElementById(name);}
function scrollY() {return self.pageYOffset || (document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop;}
function scrollX() {return self.pageXOffset || (document.documentElement && document.documentElement.scrollLeft) || document.body.scrollLeft;}
function getScrollHeight() {return (document.body.scrollHeight > document.body.offsetHeight)?document.body.scrollHe ight:document.body.offsetHeight;}
function getScrollWidth() {return (document.body.scrollWidth > document.body.offsetWidth)?document.body.scrollWid th:document.body.offsetWidth;}
function getClientWidth() {return self.innerWidth || (document.documentElement && document.documentElement.clientWidth) || document.body.clientWidth;}
function getClientHeight() {return self.innerHeight || (document.documentElement && document.documentElement.clientHeight) || document.body.clientHeight;}
window.onresize = function() {overlay(id('over')); centering(id('loadImg'));};
document.onclick = function() {
var div = document.createElement('div');
div.id = 'over';
div.style.position = 'absolute';
div.style.top = '0px';
div.style.left = '0px';
div.style.background = 'blue';
setOpacity(div,50);
overlay(div);
var img = new Image();
img.id = 'loadImg';
img.style.position = 'absolute';
img.onload = function() {
showImg(img);
};
img.src = 'http://www.knowledgerush.com/wiki_image/6/60/Gondola.arp.750pix.jpg'; // изображение
document.getElementsByTagName('body')[0].appendChild(div);
document.getElementsByTagName('body')[0].appendChild(img);
};
function setOpacity(elem,lavel) {
if('\v'=='v') elem.style.filter = "progid
XImageTransform.Microsoft.Alpha(opacity=" +lavel+")";
else elem.style.opacity = lavel/100;
}
function overlay(elem) {
elem.style.height = getClientHeight() > getScrollHeight() ? getClientHeight()+'px' : getScrollHeight()+'px';
elem.style.width = getClientWidth() > getScrollWidth() ? getClientWidth()+'px' : getScrollWidth()+'px';
}
function centering(elem) {
var t = scrollY() + (getClientHeight()/2 - elem.offsetHeight/2);
var l = scrollX() + (getClientWidth()/2 - elem.offsetWidth/2);
elem.style.top = t+'px';
elem.style.left = l+'px';
}
function showImg(elem) {
centering(elem);
}
</script>
</head>
<style type="text/css">
body {margin:0}
</style>
<body>
</body>
</html>