十一、图片
1. OnMouseOver效果我如何在用户鼠标放到图片上时更改这个图片?
鼠标移到文件上,它就会打开。鼠标移走,它就会关闭。
在这个例子中,
图像是2.gif,而
图片是1.gif。它们都保存在../hi-icons文件夹中。为了实现“mouseover”效果,标记被嵌入到一个超链接中,由这个超链接来处理onMouseOver和onMouseOut事件:
代码和上面的很相似,除了这个事件处理器将图片的编号作为了输入参数。(要查看实际的代码,可以查看本页源代码。)
2. OnMouseDown效果(OnMouseDown Effects)
Q:我如何在用户点击图片时改变它?
A:这个非常类似与onMouseOver效果。然而这个页面介绍的技术,只能在Netscape 4.x或者Internet Explorer 4.x(或者更新的浏览器中)实现,因为3.x版本的浏览器都不支持onMouseDown和onMouseUp事件。
当鼠标指向文件夹时按下鼠标,它就会打开。放开鼠标,它就会关闭。
这个例子中标签被嵌入到一个包含了onMouseDown、onMouseUp和onMouseOut事件处理器的超链接中:
这里有一个包含了几个图片的复杂一些的例子:
代码和上面的很相似,除了这个事件处理器将图片的编号作为了输入参数。(要查看实际的代码,可以查看本页源代码。)
3. 图片按钮(Buttons with Images)
Q:我能创建可按下的图片按钮吗?
A:可以。每一个按钮需要两个图片:一个是“按下的按钮”,另一个是“释放的按钮”。试一下下面的例子:将鼠标指针放到下面的按钮上,按下鼠标左键——按钮图片会变为“按下”状态。观察按钮变回“释放”状态时按钮图片的变化,将(按下的)鼠标移出图片,然后释放鼠标。
在这个例子中,“按下的按钮”图片是btn1down.gif和btn2down.gif;“释放的按钮”图片是btn1up.gif和btn2up.gif。为了让按钮“可以按下”,每一个标记都包含在了有onMouseDown、onMouseUp、onMouseOut和onClick事件处理器的超链接中: