javascript入门笔记(三)
第四课：翻转图 http://www.tinhouse.comhttp://www.agoit.com/images/smiles/icon_rolleyes.gifjavascript程序可以用事件来驱动：当javascript代码位于时间处理程序的引号中时，不用放在<script></script>中间
1. onClick: <a href = http://www.baidu.com >Baidu</a>
2. onMouseOver,onMouseOut:<a href="#"
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>
<script type = "text/javascript">
<!-- hide me from older browsers
var some_image = new Image();
some_image.src = "happy_face.gif";
// show me -->
</script></head>
<body>
<img src = "sad_face.gif" name = "my_first_image"
onMouseOver = "window.document.my_first_image.src = 'happy_face.gif';"
onMouseOut = "window.document.my_first_image.src = 'sad_face.gif';">
</body>
</html>
也可以用链接的效果:
<a href="#"
onMouseOver = "window.document.my_first_image.src = 'happy_face.gif';"
onMouseOut = "window.document.my_first_image.src = 'sad_face.gif';">
<img src="sad_face.gif" name="my_first_image" border="0">
</a>
页:
[1]