html通过htc改变图片大小

PioneerFan 2015-09-03

 新建htc文件,命名为img.htc,代码如下:

<public:component>
<public:attach event="onload" onevent="doload()" />
<public:attach event="onmouseover" onevent="domouseover()"/>
<public:attach event="onclick" onevent="doclick()"/>
<script language="javascript">
function doload(){  
if(this.width>500)this.style.width="90%";
}
function domouseover(){  
}
function doclick(){
 }
</script>
</public:component>

 当图片大于500时自动缩放为90%,在html中调用代码如下:

<html>
<head>
<style type="text/css">
<!--
body {
	font-size: 12px;
	text-align: center;
	margin: 0px;
	padding: 0px;
}
#pic{
  margin:0 auto;
  width:500px;
  padding:0;
  border:1px solid #333;
  }
img{
	max-width:90%;
	behavior:url(img.htc);
	overflow:hidden;
	}
-->
</style>
</head>
<body>
<div id="pic">
<img src="http://www.blueidea.com/img/common/logo.gif" alt="感谢blueidea被我盗链图片!"/>
<br>
<br>
<img src="http://www.blueidea.com/articleimg/2006/03/3297/koreaad_10020.jpg" alt="感谢blueidea被我盗链图片!"/>
</div>
</body>
</html>

相关推荐