图片的翻滚效果

关注

转载最新推荐文章于 2025-07-17 10:34:28 发布 1.9k 阅读 AI 写同款· GEO 优化 ›

AI权益加码！Claude Code、Cursor等20+工具免费用！购周边限时加赠Coding Plan Lite，畅享主流AI工具！学习进阶更高效！阅读详情

【图片的翻滚效果(Rollover)】

看一下这个在线示例，这个例子演示了被人熟知的通过鼠标移动来改变图片(Image)的效果，即图片的翻滚(Rollover)，注意：此例无法在 Internet Explorer 3.0 以及更早的版本中正确运行。

<IMG> 标记没有鼠标移动到其上边的事件句柄 onMouseOver，但是超链接标记 <A> 由这个事件句柄，所以我们在 <IMG> 标记两边分别加了标记 <A HREF=...> 和 </A>。

让我们看一下代码先。我们事先编写了一个函数 setImage() 用来改变图片，此函数需要两个参数，name 参数是要改变图片的 <IMG> 标记对象的名字，参数 source 是名字为 name 的 <IMG> 标记对象改变后（不是改变前的）的图片文件名，改变图片的关键在于改变图片对象 <IMG> 的 src 属性：

function setImage(name, source) {

document.images[name].src = source;
return true;
}

下边是对每一个超链接使用了三个事件句柄，一个是鼠标移动到超链接上边是的事件 onMouseOver，一个是鼠标从超链接上边移走的时候触发的事件 onMouseOut，最后一个事件是鼠标点击超链接时触发的 onClick，代码如下：

<a href="#"
onMouseOver="setImage('image1', 'button_on.gif')"
onMouseOut="setImage('image1', 'button_off.gif')"
onClick="return false;">
<img name="image1" border=0 src="button_off.gif"> <b>Item 1</b>
</a>

onMouseOver 和 onMouseOut 事件都调用了函数 setImage() ，同时传递了参数 name 的值 (这个值在 <IMG> 标记中通过 “NAME= 图片英文名字” 来定义给出) 以及参数source 的值，这个值是我们想要改变后显示的图片的文件名 (包括路径/URL)，我们将在后边讲到对象的细节问题，在这里请集中注意力对付事件句柄的相关问题。

注意到 onClick 事件，触发后它只执行 return false 语句，用来告诉浏览器制止/忽略这个事件的默认动作，否则，浏览器将会执行超链接的默认动作，跟随超链接所指向的地址/URL，下载一个新的页面，而通过返回 false 值，我们可以告知浏览器不要这样做。当然，如果你想要让它转到另一个新的页面的话，你可以使用 return true 或者干脆就不要定义 onClick 事件（即删除上边语句中的 onClick 事件）。