JavaScript精简学习3：图像

最新推荐文章于 2024-09-21 11:34:18 发布

ahoal

最新推荐文章于 2024-09-21 11:34:18 发布

阅读量315

点赞数

文章标签： javascript imagelist image border function

36 读取图像属性
1: <img src=http://www.webjx.com/htmldata/2006-02-06/”image1.jpg” name=”myImage”>
2: <a href=http://www.webjx.com/htmldata/2006-02-06/”# ” onClick=”window.alert(document.myImage.width)”>Width</a>
3:

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

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=http://www.webjx.com/htmldata/2006-02-06/”myUrl” onMouseOver=”document.myImage.src = rollImage.src;”
8: onMouseOut=”document.myImage.src = defaultImage.src;”>
9: <img src=http://www.webjx.com/htmldata/2006-02-06/”image1.jpg” name=”myImage” width=100 height=100 border=0>

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=http://www.webjx.com/htmldata/2006-02-06/”’ + imageList[imageChoice] + ‘“>’);
9: </script>

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=http://www.webjx.com/htmldata/2006-02-06/”#” onMouseOver=”document.myImage1.src = rollImage1[replacement].src;”
15: onMouseOut=”document.myImage1.src = rollImage1[source].src;”>
16: <img src=http://www.webjx.com/htmldata/2006-02-06/”image1.jpg” width=100 name=”myImage1” border=0>
17: </a>

41 创建幻灯片
1: <script language=”JavaScript”>
2: var imageList = new Array;
3: imageList[0] = new Image;
4: imageList[0].src = “image1.jpg”;
5: imageList[1] = new Image;
6: imageList[1].src = “image2.jpg”;
7: imageList[2] = new Image;
8: imageList[2].src = “image3.jpg”;
9: imageList[3] = new Image;
10: imageList[3].src = “image4.jpg”;
11: function slideShow(imageNumber) {
12: document.slideShow.src = imageList[imageNumber].src;
13: imageNumber += 1;
14: if (imageNumber < imageList.length) {
15: window.setTimeout(“slideShow(“ + imageNumber + “)”,3000);
16: }
17: }
18: </script>
19: </head>
20: <body onLoad=”slideShow(0)”>
21: <img src=http://www.webjx.com/htmldata/2006-02-06/”image1.jpg” width=100 name=”slideShow”>

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://some.host/”;
9: urlList[1] = “http://another.host/”;
10: urlList[2] = “http://somewhere.else/”;
11: urlList[3] = “http://right.here/”;
12: var imageChoice = Math.floor(Math.random() * imageList.length);
13: document.write(‘<a href=http://www.webjx.com/htmldata/2006-02-06/”’ + urlList[imageChoice] + ‘“><img src=http://www.webjx.com/htmldata/2006-02-06/”’ + imageList[imageChoice] + ‘“></a>’);
14: </script>

ahoal

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫