十一、图片
1. OnMouseOver效果（OnMouseOver Effects）
Q：我如何在用户鼠标放到图片上时更改这个图片？
A：这里一个简单的例子：
鼠标移到文件上，它就会打开。鼠标移走，它就会关闭。
在这个例子中，图像是2.gif，而
图片是1.gif。它们都保存在../hi-icons文件夹中。为了实现“mouseover”效果，<IMG>标记被嵌入到一个超链接中，由这个超链接来处理onMouseOver和onMouseOut事件：
<a href="#any_URL" onMouseOver="handleOver();return true;" onMouseOut="handleOut();return true;" ><img name=imgName width=17 height=15 border=0 alt="This image changes when you point at it!" src="../hi-icons/2.gif" ></a>
在该页的<HEAD>部分，我们使用JavaScript代码，预先载入了图片文件，并且定义了事件处理函数：
<script language="JavaScript">
<!--
// PRELOADING IMAGES
if (document.images) {
img_on =new Image(); img_on.src ="../hi-icons/1.gif";
img_off=new Image(); img_off.src="../hi-icons/2.gif";
}
function handleOver() {
if (document.images) document.imgName.src=img_on.src;
}
function handleOut() {
if (document.images) document.imgName.src=img_off.src;
}
//-->
</script>
这里还有一个包含了几个图片的复杂一些的例子：
代码和上面的很相似，除了这个事件处理器将图片的编号作为了输入参数。（要查看实际的代码，可以查看本页源代码。）
2. OnMouseDown效果（OnMouseDown Effects）
Q：我如何在用户点击图片时改变它？
A：这个非常类似与onMouseOver效果。然而这个页面介绍的技术，只能在Netscape 4.x或者Internet Explorer 4.x（或者更新的浏览器中）实现，因为3.x版本的浏览器都不支持onMouseDown和onMouseUp事件。
这是一个简单的例子：
当鼠标指向文件夹时按下鼠标，它就会打开。放开鼠标，它就会关闭。
这个例子中<IMG>标签被嵌入到一个包含了onMouseDown、onMouseUp和onMouseOut事件处理器的超链接中：
<a href="#any_URL" onMouseDown="handlePress();return true;" onMouseUp="handleRelease();return true;" onMouseOut="handleRelease();return true;" onClick="return false;" ><img name=imgName width=17 height=15 border=0 alt="This image changes when you press the mouse button!" src="../hi-icons/2.gif" ></a>
在本页的<HEAD>区域中，我们使用JavaScript预先载入这些图片，并定义了事件处理函数：
<script language="JavaScript">
<!--
// PRELOADING IMAGES
if (document.images) {
img_on =new Image(); img_on.src ="../hi-icons/1.gif";
img_off=new Image(); img_off.src="../hi-icons/2.gif";
}
function handlePress() {
if (document.images) document.imgName.src=img_on.src;
}
function handleRelease() {
if (document.images) document.imgName.src=img_off.src;
}
//-->
</script>
这里有一个包含了几个图片的复杂一些的例子：
代码和上面的很相似，除了这个事件处理器将图片的编号作为了输入参数。（要查看实际的代码，可以查看本页源代码。）
3. 图片按钮（Buttons with Images）
Q：我能创建可按下的图片按钮吗？
A：可以。每一个按钮需要两个图片：一个是“按下的按钮”，另一个是“释放的按钮”。试一下下面的例子：将鼠标指针放到下面的按钮上，按下鼠标左键——按钮图片会变为“按下”状态。观察按钮变回“释放”状态时按钮图片的变化，将（按下的）鼠标移出图片，然后释放鼠标。
在这个例子中，“按下的按钮”图片是btn1down.gif和btn2down.gif；“释放的按钮”图片是btn1up.gif和btn2up.gif。为了让按钮“可以按下”，每一个<IMG>标记都包含在了有onMouseDown、onMouseUp、onMouseOut和onClick事件处理器的超链接中：
<a href="indexpg.htm"
onMouseDown="pressButton('btn1');return true;"
onMouseUp="releaseButton('btn1');return true;"
onMouseOut="releaseButton('btn1');return true;"
onClick="return true;"
><img name=btn1 width=60 height=22 border=0
alt="Index"
src="btn1up.gif"
></a>
<a href="startpag.htm"
onMouseDown="pressButton('btn2');return true;"
onMouseUp="releaseButton('btn2');return true;"
onMouseOut="releaseButton('btn2');return true;"
onClick="return true;"
><img name=btn2 width=60 height=22 border=0
alt="Home"
src="btn2up.gif"
></a>
该页的<HEAD>区域包含预载入图片文件和定义事件处理函数的JavaScript代码：
<script language="JavaScript">
<!--
// PRELOADING IMAGES
if (document.images) {
btn1_down=new Image(); btn1_down.src="btn1down.gif";
btn1_up =new Image(); btn1_up.src ="btn1up.gif";
btn2_down=new Image(); btn2_down.src="btn2down.gif";
btn2_up =new Image(); btn2_up.src ="btn2up.gif";
}
// EVENT HANDLERS
function pressButton(btName) {
if (document.images)
eval('document.'+btName+'.src='+btName+'_down.src');
}
function releaseButton(btName) {
if (document.images)
eval('document.'+btName+'.src='+btName+'_up.src');
}
//-->
</script>
