JavaScript FAQ（十三）——图片

现在的位置: 首页 > 综合 > 正文

RSS

JavaScript FAQ（十三）——图片

2013年03月05日 ⁄ 综合 ⁄ 共 3246字 ⁄ 字号小中大 ⁄ 评论关闭

十一、图片

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>