你知道JavaScript中如何對圖像進行操作嗎，這里和大家簡單分享一下，希望通過本文的詳細介紹你對JavaScript中圖像的操作有明確的認識。

JavaScript圖像

讀取圖像屬性

1<imgsrcimgsrc="/”image1.jpg"”name=”myImage”> 
2<ahrefahref=”#”  
onClick=”window.alert(document.myImage.width)”> 
Width</a> 

動態加載圖像

1<scriptlanguagescriptlanguage=”JavaScript”> 
2myImage=newImage;  
3myImage.src=“Tellers1.jpg”;  
4</script> 

簡單的圖像替換

1<scriptlanguagescriptlanguage=”JavaScript”> 
2rollImage=newImage;  
3rollImage.src=“rollImage1.jpg”;  
4defaultImage=newImage;  
5defaultImage.src=“image1.jpg”;  
6</script> 
7<ahrefahref="/”myUrl" 
”onMouseOver=”document.myImage.src=rollImage.src;”  
8onMouseOut=”document.myImage.src=defaultImage.src;”> 
9<imgsrcimgsrc="/”image1.jpg" 
”name=”myImage”width=100height=100border=0> 

隨機顯示圖像 

1<scriptlanguagescriptlanguage=”JavaScript”> 
2varimageList=newArray;3:imageList[0]=“image1.jpg”;  
3imageList[1]=“image2.jpg”;  
4imageList[2]=“image3.jpg”;  
5imageList[3]=“image4.jpg”;  
6varimageChoice=Math.floor(Math.random()*imageList.length);  
7document.write(‘<imgsrcimgsrc=”’+imageList[imageChoice]+‘“>’);  
8</script> 

函數實現的圖像替換 

1<scriptlanguagescriptlanguage=”JavaScript”> 
2varsource=0;  
3varreplacement=1;  
4functioncreateRollOver(originalImage,replacementImage){　  
5varimageArray=newArray;  
6imageArray[source]=newImage;  
7imageArray[source].src=originalImage;  
8imageArray[replacement]=newImage;  
9imageArray[replacement].src=replacementImage;  
10returnimageArray;  
11}  
12varrollImage1=createRollOver(“image1.jpg”,”rollImage1.jpg”);  
13</script> 
14<ahrefahref=”#”  
onMouseOver=”document.myImage1.src=rollImage1[replacement].src;”  
15onMouseOut=”document.myImage1.src=rollImage1[source].src;”> 
16<imgsrcimgsrc="/”image1.jpg" 
”width=100name=”myImage1”border=0> 
17</a> 

創建幻燈片 

1<scriptlanguagescriptlanguage=”JavaScript”> 
2varimageList=newArray;  
3imageList[0]=newImage;  
4imageList[0].src=“image1.jpg”;  
5imageList[1]=newImage;  
6imageList[1].src=“image2.jpg”;  
7imageList[2]=newImage;  
8imageList[2].src=“image3.jpg”;  
9imageList[3]=newImage;  
10imageList[3].src=“image4.jpg”;  
11functionslideShow(imageNumber){　  
12document.slideShow.src=imageList[imageNumber].src;  
13imageNumber+=1;  
14if(imageNumber<imageList.length){　  
15window.setTimeout(“slideShow(“+imageNumber+“)”,3000);  
16}  
17}  
18</script> 
19</head> 
20<bodyonLoadbodyonLoad=”slideShow(0)”> 
21<imgsrcimgsrc="/”image1.jpg"”width=100name=”slideShow”> 

隨機廣告圖片 

1<scriptlanguagescriptlanguage=”JavaScript”> 
2varimageList=newArray;  
3imageList[0]=“image1.jpg”;  
4imageList[1]=“image2.jpg”;  
5imageList[2]=“image3.jpg”;  
6imageList[3]=“image4.jpg”;  
7varurlList=newArray;  
8urlList[0]=“http://some.host/”;  
9urlList[1]=“http://another.host/”;  
10urlList[2]=“http://somewhere.else/”;  
11urlList[3]=“http://right.here/”;  
12varimageChoice=Math.floor(Math.random()*imageList.length);  
13document.write(‘<ahrefahref=”’+urlList[imageChoice]+‘“> 
<imgsrcimgsrc=”’+imageList[imageChoice]+‘“></a>’);  
14</script> 

【編輯推薦】

1. 詳細說明Javascript匿名函數技巧與文章
2. 循環結構中JavaScript匿名函數用法實例解析
3. 常用JavaScript方法和技巧
4. JavaScript函數中arguments對象
5. Javascript中CSS屬性float特殊寫法