JavaScript

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

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

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

Проверено в Internet Explorer и Mozilla Firefox.

Исходный код этого примера:
<script type="text/javascript">

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:#9fbddd 1px solid;'></div>
Теги:
создает окно
Похожие новости:
Добавлено: 12 Июля 2018 07:36:20 Добавил: Андрей Ковальчук Нравится 0
Добавить
Комментарии:
Нету комментариев для вывода...