夏日博客

A-A+

鼠标放上去变幻图片

2013年09月24日 前端设计 评论 15 条 阅读 465 views 次

一个简单的不能再简单的JS图片变换效果，我们指定一个默认的图片，当鼠标放上去变成另外一张图片，利用了JS的感应事件，鼠标放上去和鼠标离开，本来是不想把这个JS贴上来的，可最近经常用到，尤其是做网页导航的时候就更频繁了，简短的一个JS感应事件就可以制作一个非常精美的网页导航，看看这个简单的不能再简单的JS图片变换效果吧。

图片的变换效果 <img src="images/01.jpg" name="picture" width="330" height="210" border="0" align="middle" onMouseOver="this.src='images/02.jpg'" onMouseOut="this.src='images/03.jpg'"> 一个图片加了JS感应事件即可，在外面加上一个链接 A 标记即可进行链接，这样就可以设计出自己喜欢的网页导航了，我们知道，文字导航往往不能制作图片导航的效果，有了这个简单的代码，就可以弥补文字导航的缺陷了。

<a href="#">
<img src="images/01.jpg" name="picture" width="330" height="210" border="0" align="middle"
onMouseOver="this.src='images/02.jpg'" onMouseOut="this.src='images/03.jpg'">
</a>

标签：

15 条留言  访客：15 条  博主：0 条

  1. 爱浮夸 2013年09月29日 上午 10:15  -199楼  回复

    学习了，呵呵。

  2. 好运品牌鞋 2013年09月26日 下午 8:50  -198楼  回复

    从博主这里学到不少东西呢。

  3. 馒头饭 2013年09月25日 下午 12:21  -197楼  回复

    恩恩，这样做，对比:hover，对一些老版本的浏览器兼容性更好。

  4. 东 2013年09月24日 下午 11:29  -196楼  回复

    以后，我也应该去试试

  5. OA论坛 2013年09月24日 下午 11:04  -195楼  回复

    这个好，漂亮，我喜欢

  6. 郭小球 2013年09月24日 下午 8:51  -194楼  回复

    技术站、 八错！ 支持下 ~

  7. 麦田一根葱 2013年09月24日 下午 5:55  -193楼  回复

    直接在css里:hover就行了

  8. 小贾博客 2013年09月24日 下午 4:06  -192楼  回复

    没事可以搞一个玩玩

  9. 极品部落分享极品 2013年09月24日 下午 3:56  -191楼  回复

    博主的文章总是那么恰到好处…

  10. 寇铈鑫 2013年09月24日 下午 2:50  -190楼  回复

    博主 你的技术可以建站了

  11. 海涛 2013年09月24日 下午 2:26  -189楼  回复

    收藏了，还不错，

  12. 慢点博客 2013年09月24日 下午 2:10  -188楼  回复

    这个代码的适用性应该最高了。是个浏览器就能解释。

  13. 面子至上 2013年09月24日 下午 1:09  -187楼  回复

    jquery应该很好实现吧 ~来个吧少年

  14. 21氪 2013年09月24日 下午 1:08  -186楼  回复

    这个确实简单

  15. 李明 2013年09月24日 下午 12:54  -185楼  回复

    看了才知道这么简单的，谢谢博主。

给我留言