Welcome, Old Sport!

简单的图片Mouseover Javascript

by ilikecss ON 2013/04/01 9313

简单的图片Mouseover Javascript图片鼠标经过切换事件是很常见的一个脚本效果,在Dreamweaver里也有插入此事件的模板,所以制作起来还是很简单的。今天就介绍几款比较实用的Mouseover Javascript给大家。

下面是一则最简单的鼠标经过事件:

<a href="#" onmouseover="mouseOver()" onmouseout="mouseOut()"><img alt="ilikecss" src="img/1.jpg" id="over" /></a>

function mouseOver()
{
document.getElementById('over').src ="img/1.jpg"
}
function mouseOut()
{
document.getElementById('over').src ="img/1_over.jpg"
}

1. rollover.js

这款rollover.js的开源脚本也是我们公司一直在使用的,操作非常简便。代码如下:

<a href="#" ><img alt="ilikecss" src="img/1.jpg" class="imgvoer" /></a>
<script src="rollover.js" type="text/javascript"></script>

插入rollover.js脚本后,只要在你的<img>标签里添加class=”imgover”即可;当然你over的图片还是自己做的,图片命名方式为: 1.jpg, 1_o.jpg(_o为变化的图片); 下面是rollover.js的下载地址。

2. smartRollover.js

这款和上面代码差不多,只是最后图片命名不一样,也不用添加class。图片初始命名为: 1_off.jpg, 1_on.jpg(_on为变化后的图片)

<a href="#" ><img alt="ilikecss" src="img/1_off.jpg" /></a>

最后推荐几款Firefox组件

Fasterfox Lite

Fasterfox Lite

听说装了这个可以提高你Firefox的性能。

East Asian Translator

East Asian Translator

右键 – 大东亚翻译共和体 (没多大鸟用)

22条评论
  1. #1

    爱特网说道:

    网站好漂亮,以后常来学习

  2. #2

    小蝴蝶说道:

    沙发

  3. #3

    潜行者m说道:

    鼠标经过切换图片,不应该使用 CSS 吗?用 JavaScript 来切换,这么麻烦,而且还有各种意外情况。有什么特殊的要求吗?用 JavaScript?

    • CSS?你是说换背景图片?
      针对一些写真图片需要切换,而且要有alt属性

    • 我再三想了下你的问题:
      1. 这个脚本是全局定义,如果你的网站需要大量采用图片切换效果,用脚本是好的选择。
      2. 有些网页需要添加图片的alt属性来增强SEO的效果,css做不到
      3. 针对某些浏览器不支持伪类,还是脚本方便。

      • 文中说的切换的图片,难道不是诸如 按钮 之类的背景图片?这些修饰性的图片一般不是使用 sprite 之类的合成图,然后用 CSS 引入?修饰性的图片,也需要添加 alt 属性来 SEO 的吗?

        要是一些正文的图片,或者幻灯片之类的,那切换肯定要用 JavaScript 了,要用 img 引入。

        • 你说的没错,不过这取决于你网站的方向,一些酒店图片有大量的图片切换效果,而且每张图片一定要加上alt属性,如果使用css的话内容太大了。

  4. #4

    金刚禅狮子吼说道:

    看到一处错误。。。。哇哈哈哈,不过无伤大雅~

  5. 貌似比较适合新人,我们不是一般用CSS Sprite嘛!用background-position属变化呢~

  6. #6

    啄木游弋说道:

    上面把我的问题都给提了,其实我也是以为css伪类就搞定了。虽然看了你的解释,还不是最明白,当然这和我的业余水平有关系。

  7. #7

    yxiao说道:

    你的网站做的真漂亮。

  8. #8

    mr.johness说道:

    第三种好理解点 :smile:

  9. 值得学习




TOP