JavaScript学习笔记 4 Image Swapping（图片交换）

最新推荐文章于 2024-01-08 16:13:57 发布

weixin_30319153

最新推荐文章于 2024-01-08 16:13:57 发布

阅读量109

点赞数

原文链接：http://www.cnblogs.com/tograce/archive/2008/10/02/1303266.html

版权

(出处: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">

<head>

<title>无标题文档</title>

</head>

<body>

<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">

<head>

<!-- 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>

<h3>Browser Configuration</h3>

<b>Welcome

<!-- 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;">

</body>

</html>


(参考资料:http://www.webmonkey.com/tutorial/JavaScript_Tutorial_-_Lesson_2#Example_of_a_Simple_if-then_Statement)

转载于:https://www.cnblogs.com/tograce/archive/2008/10/02/1303266.html

weixin_30319153

关注

0
点赞
踩
0

收藏

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

分享到 QQ

分享到新浪微博

扫一扫