javascript入门笔记(三)

wanyin940

浏览: 28280 次
性别:
来自: 武汉

最近访客更多访客>>

sunblessed

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

javascript

JavaScript HTML 中间件

第四课：翻转图 http://www.tinhouse.com

javascript程序可以用事件来驱动：当javascript代码位于时间处理程序的引号中时，不用放在<script></script>中间

1. onClick: <a href = http://www.baidu.com onClick="alert('Goto Baidu');">Baidu</a>

2. onMouseOver,onMouseOut:<a href="#"

onMouseOver="alert('Mouse overboard!');"

onMouseOut = "alert('Mouse off of board!');"

onClick = "return false;">board</a>

3.onMouseMove:事件处理程序会在光标在链接上面移动时调用.

onMouseDown:事件处理程序会在鼠标键在链接上按下去时调用.

onMouseUp:事件处理程序会在鼠标键在链接上抬起来时调用.

更多有意思的操作：<a href="#"

onClick= "var the_color=prompt('red or blue',' ');

window.document.bgColor=the_color;

return false;">change bgcolor</a>

4.替换图像，点击链接后，sad_face.gif变成happy_face.gif

<html><head><title>Simple Image Swap</title></head>
<body>
<img src = "sad_face.gif" name = "my_image" >
<br>
<a href = "#"
onClick = "window.document.my_image.src = 'happy_face.gif';
return false;">
make my day!</a>

</body>
</html>

5.实现翻转效果：

<html><head><title>Preloaded Rollover</title>

var some_image = new Image();
some_image.src = "happy_face.gif";

// show me -->
</script></head>

也可以用链接的效果:

<a href="#"

onMouseOver = "window.document.my_first_image.src = 'happy_face.gif';"
onMouseOut = "window.document.my_first_image.src = 'sad_face.gif';">

</a>

分享到：

javascript入门笔记(四) | javascript入门笔记(二)

2009-04-07 15:47
浏览 825
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论