点击按钮显示图片的两种方法_网页设计如何点击按钮在旁边显示相应的图片-CSDN博客

本文链接：https://blog.csdn.net/i2295301/article/details/52965125

 
 
  
  1.function openwin(url) {
 
 
 
 		
 
 
 
 
  
  		//alert(url);
 
 
 
 
  
  		var iHeight=550;
 
 
 
 
  
  		var iWidth=550;
 
 
 
 
  
  		var iTop = (window.screen.availHeight-30-iHeight)/2; //获得窗口的垂直位置;
 
 
 
 
  
  		var iLeft = (window.screen.availWidth-10-iWidth)/2; //获得窗口的水平位置;
 
 
 
 
  
  		OpenWindow=window.open("", "newwin", "height="+iHeight+", width="+iWidth+",top="+iTop+",left="+iLeft+",toolbar=no,menubar=no,scrollbars=no, resizable=yes,location=no, status=no"); 
 
 
 
 
  
  		//写成一行 
 
 
 
 
  
  		OpenWindow.document.write("<TITLE>图片</TITLE>") 
 
 
 
 
  
  		OpenWindow.document.write("<BODY BGCOLOR=#ffffff>") 
 
 
 
 
  
  		//OpenWindow.document.write("显示图片") 
 
 
 
 
  
  		OpenWindow.document.write("<img src="+url+" /> ") 
 
 
 
 		
 
 
 
 		
 
 
 
 
  
  		OpenWindow.document.write("</BODY>") 
 
 
 
 
  
  		OpenWindow.document.write("</HTML>") 
 
 
 
 
  
  		OpenWindow.document.close()
 
 
 
 		
 
 
 
 
  
  	} 
 
 
 
 
  
  	<input type="button" value="查看"
 
 
 
 
  
  	οnclick="openwin('ftp://${ftpUserName}:${ftpPassword}@${ftpHost}/${idcard}')" class="btn">
 
 
 
 	
 
 
 
 
  
  	对应的网址：http://www.cnblogs.com/stswordman/archive/2006/06/02/415853.html
 
 
 
 
  
  2.图片大小可根据窗口适应
 
 
 
 
  
      var oImg=new Image();   //创建图像对象 
 
 
 
 
  
  	oImg.src=url;        //设置图像源 
 
 
 
 
  
  	oImg.οnlοad=window.open(url,"","width="+iWidth+",height="+iHeight+",top="+iTop+",left="+iLeft+",toolbar=no,menubar=no,scrollbars=yes, resizable=yes,location=no, status=no,titlebar=no"); 
 
 
 
 
  
  

 
 
 
 
  
  	<button onClick="fiximgwin('ftp://huofenghuang:huofenghuang@192.168.9.156/phenix/contract/2016/03/28/1459137070810685.jpg')"> 打开图片</button>