JavaScript方法和技巧大全——图像

读取图像属性

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

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

简单的图像替换
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>

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

函数实现的图像替换
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>

创建幻灯片
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="/”image1.jpg"” width=100 name=”slideShow”>

随机广告图片
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=”’ + urlList[imageChoice] + ‘“><img src=”’ + imageList[imageChoice] + ‘“></a>’);
14</script>

posted on 2009-01-23 15:23 飞翔天使阅读(585) 评论(1) 编辑收藏所属分类: javascript

常用链接

留言簿(1)

随笔分类(146)

随笔档案(147)

文章分类(28)

文章档案(28)

喜欢的Blog

搜索

最新评论

阅读排行榜

评论排行榜


只有注册用户登录后才能发表评论。




网站导航: 博客园 IT新闻知识库 C++博客博问管理
相关文章: Javascript+CSS实现Flash动态新闻效果网页的复制和防复制 js获得table单元格的信息图片上传的综合操作单击放回上页的按钮或使用window.history.go(-1)返回上页的同时刷新"上页"技术模态窗口window.showModalDialog 三种弹出对话框的用法实例 window.open教程 js常用技巧（2012.7.16更新） javascript实现日期星期的显示