Назад
Регистрация Войти
Войти через VK Войти через FB Войти через Google Войти через Яндекс




Поиск по сайту




Наш Telegram бот: @htmlweb_bot

Создать окно по размерам картинки

Пример создает окно по размерам картинки и загружает в него изображение.

Открыть окно

Открыть DIV

Исходный код этого примера:
<script>

img1=new Image();
img_to=0;

function imgopen(imgf,tit){
   img1.src=imgf;
   img1.onload=function() { LoadImage(img1,tit); };
   img_to=window.setTimeout(function() { LoadImage(img1,tit); }, 100 ); // на случай если onload не сработает
// теперь нужно подождать загрузки изображения
// для этого используется обработчик события загрузки картинки onLoad
   return false;
}

function LoadImage(img1,tit){
if(img_to){window.clearTimeout(img_to);img_to=0;} // чтобы не открылось 2 окна
if(!img1.width){ // жду загрузки
   img_to=window.setTimeout(function() { LoadImage(img1,tit); }, 100 ); // на случай если onload не сработает
   return;
}
img1.onload=null; // чтобы не открылось 2 окна

rand_id='image'+(Math.round(Math.random()*1000));

outf="<html><head>"
 +"<title>"+tit+"</title>"
 +"</head>"
 +"<body style=\"margin:0\">"
 +"<img style=\"margin:0\" src=\""+img1.src+"\" width=\""+img1.width+"\" height=\""+img1.height+"\" /><br>"
 +" ("+(img1.width)+"x"+(img1.height)+")"
 +"</body></html>" ;

// добавляю запас по высоте (+20)на надпись о размере файла картинки
iopen="iwin=self.open('"+img1.src+"', '"+rand_id+"', 'width="+(img1.width)+",height="+(img1.height+20)+",top=50,left=50');"
 +"if(iwin){iwin.document.write('"+outf+"');"
 +"iwin.focus();}";
img1=null; // чтобы не открылось 2 окна

eval(iopen);
}

function imgdiv(url)
	{
	var el=document.getElementById('img_div');
	var img=new Image();
	img.onload=function()
		{
		el.style.width=img.width+'px';
		el.style.height=(img.height+20)+'px';
		el.innerHTML='<img src='+url+' style="margin:0" width="'+img.width+'" height="'+img.height+'"><br> ('+img.width+'x'+img.height+')';
		}
	el.innerHTML='Загружается...';
	img.src=url;
	}
</script>
<h3><a href='#' onclick='return imgopen("http://htmlweb.ru/java/ann.jpg","Заголовок окна");'>Открыть окно</a></h3>
<h3><a href='#' onclick='imgdiv("http://htmlweb.ru/java/ann.jpg")'>Открыть DIV</a></h3>
<div id="img_div" style='border: 1px solid #9fbddd;'></div>

Обратите вниманиена на то, что всплывающие окна могут быть запрещены браузером. Кроме того настройки браузера могут все всплывающие окна открывать на вкладках, - в этом случае именение размеров не произойдет.

Дополнительные параметры окна (toolbar, location, directories, status, menubar, scrollbars, resizable) могут принимать значения yes или no.


.