你知道JavaScript中如何对图像进行操作吗，这里和大家简单分享一下，希望通过本文的详细介绍你对JavaScript中图像的操作有明确的认识。

JavaScript图像

读取图像属性

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

动态加载图像

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

简单的图像替换

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

随机显示图像 

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

函数实现的图像替换 

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

创建幻灯片 

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

随机广告图片 

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