javascript---第三天源代码-优快云博客

本文通过两个实例展示了如何使用HTML与JavaScript进行图像操作。第一个实例实现了图像的交互式变化，包括鼠标悬停时图像的变化效果。第二个实例则演示了如何随机显示三张图片，涉及JavaScript中的数组和随机数生成。

ImageTest1.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>
<HEAD>

<TITLE> ImageTest1 </TITLE>
</HEAD>

<BODY>
<script language = "javascript">
var defaultImage = new Image;
defaultImage.src = "winxpaa11.jpg";
var rolledImage = new Image;
rolledImage.src = "winxpaa13.jpg";
var thirdImage = new Image;
thirdImage.src = "winxpaa10.jpg";
/*<img src = "C:/Documents and Settings/Administrator/My Documents/壁纸/winxpaa14.jpg" name = "myImage">
<a href = "#" onClick = "window.alert(document.myImage.width)">width</a><br>
<a href = "#" onClick = "window.alert(document.myImage.height)"><img src = "C:/Documents and Settings/Administrator/My Documents/壁纸/winxpaa13.jpg" name = "myImage2"></a><br><br><br>
*/
</script>
<img src = "winxpaa14.jpg" name = "myImage"
onClick = "window.alert('fefef');">
<a href = "#" onClick = "document.myImage3.src = defaultImage.src;"
onMouseOver = "document.myImage3.src = rolledImage.src" onMouseOut = "document.myImage3.src =defaultImage.src">
<image src = "winxpaa15.jpg" name = "myImage3">
</a><br>

</BODY>
</HTML>

ImageTest2.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>
<HEAD>
<TITLE> ImageTest2 </TITLE>
<script language = "javascript">
var imageList = new Array;
for(var i = 0;i < 5; i++)
{
imageList[i] = "winxpaa1"+i+".jpg";
}

function X()
{//var s = "<img src = C:/Documents and Settings/Administrator/My Documents/壁纸/winxpaa13.jpg>";
//document.write(s);
var imageChoice = Math.floor(Math.random()*imageList.length);
document.write('<img src="' + imageList[imageChoice]+'"width = 100 height = 100>');
}
</script>
</HEAD>

</BODY>
</HTML>