Показать сообщение отдельно
  #9 (permalink)  
Старый 06.05.2009, 12:24
kondrat
 
Сообщений: n/a

спасибо, с оперой разобрался, только теперь еще возник вопрос, как узнать размеры изображения до вывода его на страницу, просто получается так что оно выводиться в верхнем левом углу а только после 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.scrollHeight:document.body.offsetHeight;}
function getScrollWidth() {return (document.body.scrollWidth > document.body.offsetWidth)?document.body.scrollWidth: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';
	setOpacity(img,0);
	img.onload = function() {
		showImg(img);
		setOpacity(img,100);
	};
	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:DXImageTransform.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.clientHeight/2);
	var l = scrollX() + (getClientWidth()/2 - elem.clientWidth/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>
Ответить с цитированием