JavaScript图像
36 读取图像属性
37 动态加载图像
38 简单的图像替换
39 随机显示图像
40 函数实现的图像替换
41 创建幻灯片
42 随机广告图片
1
<img src="/”image1.jpg"” name=”myImage”>
2
<a href=”# ” onClick=”window.alert(document.myImage.width)”>Width</a>

2

37 动态加载图像
1
<script language=”JavaScript”>
2
myImage = new Image;
3
myImage.src = “Tellers1.jpg”;
4
</script>

2

3

4

38 简单的图像替换
1
<script language=”JavaScript”>
2
rollImage = new Image;
3
rollImage.src = “rollImage1.jpg”;
4
defaultImage = new Image;
5
defaultImage.src = “image1.jpg”;
6
</script>
7
<a href="/”myUrl"” onMouseOver=”document.myImage.src = rollImage.src;”
8
onMouseOut=”document.myImage.src = defaultImage.src;”>
9
<img src="/”image1.jpg"” name=”myImage” width=100 height=100 border=0> 10

2

3

4

5

6

7

8

9


39 随机显示图像
1
<script language=”JavaScript”>
2
var imageList = new Array;
3
imageList[0] = “image1.jpg”;
4
imageList[1] = “image2.jpg”;
5
imageList[2] = “image3.jpg”;
6
imageList[3] = “image4.jpg”;
7
var imageChoice = Math.floor(Math.random() * imageList.length);
8
document.write(‘<img src=”’ + imageList[imageChoice] + ‘“>’);
9
</script>

2

3

4

5

6

7

8

9

40 函数实现的图像替换
1
<script language=”JavaScript”>
2
var source = 0;
3
var replacement = 1;
4
function createRollOver(originalImage,replacementImage) {
5
var imageArray = new Array;
6
imageArray[source] = new Image;
7
imageArray[source].src = originalImage;
8
imageArray[replacement] = new Image;
9
imageArray[replacement].src = replacementImage;
10
return imageArray;
11
}
12
var rollImage1 = createRollOver(“image1.jpg”,”rollImage1.jpg”);
13
</script>
14
<a href=”#” onMouseOver=”document.myImage1.src = rollImage1[replacement].src;”
15
onMouseOut=”document.myImage1.src = rollImage1[source].src;”>
16
<img src="/”image1.jpg"” width=100 name=”myImage1” border=0>
17
</a>

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

41 创建幻灯片
1

2
<script language=”JavaScript”>
3
var imageList = new Array;
4
imageList[0] = new Image;
5
imageList[0].src = “image1.jpg”;
6
imageList[1] = new Image;
7
imageList[1].src = “image2.jpg”;
8
imageList[2] = new Image;
9
imageList[2].src = “image3.jpg”;
10
imageList[3] = new Image;
11
imageList[3].src = “image4.jpg”;
12
function slideShow(imageNumber) {
13
document.slideShow.src = imageList[imageNumber].src;
14
imageNumber += 1;
15
if (imageNumber < imageList.length) {
16
window.setTimeout(“slideShow(“ + imageNumber + “)”,3000);
17
}
18
}
19
</script>
20
</head>
21
<body onLoad=”slideShow(0)”>
22
<img src="/”image1.jpg"” width=100 name=”slideShow”>
23



2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23


42 随机广告图片
1
<script language=”JavaScript”>
2
var imageList = new Array;
3
imageList[0] = “image1.jpg”;
4
imageList[1] = “image2.jpg”;
5
imageList[2] = “image3.jpg”;
6
imageList[3] = “image4.jpg”;
7
var urlList = new Array;
8
urlList[0] = “http://meil.cnblogs.com”;
9
urlList[1] = “http://meil75.bokee.com”;
10
urlList[2] = “http://blog.csdn.net/meil/”;
11
urlList[3] = “http://meil.cnblogs.com/archive/2006/07/27/460520.html#461233”;
12
var imageChoice = Math.floor(Math.random() * imageList.length);
13
document.write(‘<a href=”’ + urlList[imageChoice] + ‘“><img src=”’ + imageList[imageChoice] + ‘“></a>’);
14
</script>

2

3

4

5

6

7

8

9

10

11

12

13

14

我来自:向东博客
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步