<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Page</title>
<style type="text/css">
.img
{
width:120px; height:140px; border-width:1px; border-style:solid; border-color:Red;
}
</style>
<script type="text/javascript" src="JSLib/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
function file_change(file){
file.select();
var src = document.selection.createRange().text;
$("#img_pic").css("filter","progid:DXImageTransform.Microsoft.AlphaImageLoader(src="+src+", sizingMethod=scale)");
}
</script>
</head>
<body>
<form method="post" action="#">
<br />
<div class="img" id="img_pic"></div>
<input type="file" name="my_file" onpropertychange="file_change(this)" />
</form>
</body>
</html>
AlphaImageLoader兼容性：IE5.5+
語法：
filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled , sizingMethod=sSize , src=sURL )
屬性：
enabled :
可選項。布爾值(Boolean)。設置或檢索濾鏡是否激活。true | false
true
:
默認值。濾鏡激活。
false
:
濾鏡被禁止。
sizingMethod
:
可選項。字符串(String)。設置或檢索濾鏡作用的對象的圖片在對象容器邊界內的顯示方式。
crop
:
剪切圖片以適應對象尺寸。
image
:
默認值。增大或減小對象的尺寸邊界以適應圖片的尺寸。
scale
:
縮放圖片以適應對象的尺寸邊界。
src
:
必選項。字符串(String)。使用絕對或相對 url 地址指定背景圖像。假如忽略此參數，濾鏡將不會作用。
特性：
Enabled
:
可讀寫。布爾值(Boolean)。參閱 enabled 屬性。
sizingMethod
:
可讀寫。字符串(String)。參閱 sizingMethod 屬性。
src
:
可讀寫。字符串(String)。參閱 src 屬性。
說明：
在對象容器邊界內，在對象的背景和內容之間顯示一張圖片。並提供對此圖片的剪切和改變尺寸的操作。如果載入的是PNG(Portable Network Graphics)格式，則0%-100%的透明度也被提供。
PNG(Portable Network Graphics)格式的圖片的透明度不妨礙你選擇文本。也就是說，你可以選擇顯示在PNG(Portable Network Graphics)格式的圖片完全透明區域後面的內容。
示例：
#idDiv{position:absolute; left:140px; height:400; width:400;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='rain1977.gif',sizingMethod='scale');}
.dream{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/earglobe.gif');}
讓DIV背景圖和自適應DIV的寬和高的上傳圖片例子
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章