JavaScript FAQ（十三）-优快云博客

本文介绍了如何使用HTML和JavaScript实现图片的鼠标悬停、鼠标点击及按钮效果。通过预加载图片并利用事件处理器，可以轻松地创建交互式的图片元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

11. 图片

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代码，预先载入了图片文件，并且定义了事件处理函数：

  <scriptlanguage="JavaScript"> 
<!--
//PRELOADINGIMAGES 
 if(document.images){ 
 img_on=newImage();img_on.src="../hi-icons/1.gif"; 
 img_off=newImage();img_off.src="../hi-icons/2.gif"; 
}
 
 functionhandleOver(){ 
 if(document.images)document.imgName.src=img_on.src; 
}
 
 functionhandleOut(){ 
 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预先载入这些图片，并定义了事件处理函数：

  <scriptlanguage="JavaScript"> 
<!--
//PRELOADINGIMAGES 
 if(document.images){ 
 img_on=newImage();img_on.src="../hi-icons/1.gif"; 
 img_off=newImage();img_off.src="../hi-icons/2.gif"; 
}
 
 functionhandlePress(){ 
 if(document.images)document.imgName.src=img_on.src; 
}
 
 functionhandleRelease(){ 
 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事件处理器的超链接中：

  <ahref="indexpg.htm" 
 onMouseDown="pressButton('btn1');returntrue;" 
 onMouseUp="releaseButton('btn1');returntrue;" 
 onMouseOut="releaseButton('btn1');returntrue;" 
 onClick="returntrue;" 
 ><imgname=btn1width=60height=22border=0 
 alt="Index" 
 src="btn1up.gif" 
 ></a> 
 
 <ahref="startpag.htm" 
 onMouseDown="pressButton('btn2');returntrue;" 
 onMouseUp="releaseButton('btn2');returntrue;" 
 onMouseOut="releaseButton('btn2');returntrue;" 
 onClick="returntrue;" 
 ><imgname=btn2width=60height=22border=0 
 alt="Home" 
 src="btn2up.gif" 
 ></a> 
 

该页的<HEAD>区域包含预载入图片文件和定义事件处理函数的JavaScript代码：

  <scriptlanguage="JavaScript"> 
<!--
//PRELOADINGIMAGES 
 if(document.images){ 
 btn1_down=newImage();btn1_down.src="btn1down.gif"; 
 btn1_up=newImage();btn1_up.src="btn1up.gif"; 
 
 btn2_down=newImage();btn2_down.src="btn2down.gif"; 
 btn2_up=newImage();btn2_up.src="btn2up.gif"; 
}
 
//EVENTHANDLERS 
 functionpressButton(btName){ 
 if(document.images) 
 eval('document.'+btName+'.src='+btName+'_down.src'); 
}
 
 functionreleaseButton(btName){ 
 if(document.images) 
 eval('document.'+btName+'.src='+btName+'_up.src'); 
}
//--> 
</script>
 
 