(出处:http://www.cnblogs.com/tograce/category/157013.html)
JavaScript一个很通用的作用是:当鼠标置于目标上时,图片改变
Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<body>
<img src="image/monkey.gif" name="the_image">
<!--这就象一个标准的 <img src= > 标签,只是它被给了一个名字:the_image, 名字是任意取的*/-->
<a href="#" onMouseOver="document.the_image.src='image/thau.gif';">change</a>
<!--document.the_image.src='button_d.gif';
该句是说:“找到叫'the_image'的图片并将其src 变为button_d.gif."-->
</body>
</html>
再来一个稍复杂的实例。
这个实例要完成这样的一个功能:页面上有两张图片(一上一下),当将鼠标移到下面的图片上是,图片变化,每移动一回,
都会变,当点击鼠标时,上面的图片也变成了和下面一样的图片。这样的效果不错吧:)
Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<script language="JavaScript">
<!-- hide me
var temp = "";
var image1 = 'image/thau.gif';
var image2 = 'image/sky.gif';
var image3 = 'image/monkey.gif'
var user_name = prompt("What's your name", "");
if (user_name == ""){
user_name = "流浪人";
}
// end hide -->
</script>
</head>
<body>
<p><img src="image/monkey.gif" name="brand_image"></p>
<h3>Browser Configuration</h3>
<b>Welcome
<script language="JavaScript">
<!-- hide me
document.write(user_name);
// end hide -->
</script>
</b>
<p>Brand your browser by moving your mouse over the image below until you find one you like. Then click on the image.</p>
<p>将移到下面的图片上,直到找到你喜欢的图片,然后点击它。</p>
<p><a href="#"
onMouseOver="temp=image1; image1=image2; image2=image3; image3=temp; document.the_image.src=image1;"
onClick="document.brand_image.src=image1;">
<img src="image/monkey.gif" name="the_image" border=0></a></p>
</body>
</html>
(参考资料:http://www.webmonkey.com/tutorial/JavaScript_Tutorial_-_Lesson_2#Example_of_a_Simple_if-then_Statement)