|
在学习JavaScript时，你学到的一个最基本的技巧就是图片交换，即当鼠标指针滑过图片时，图片就会发生改变。这相当简单，只需要应用几个事件处理器和一两行代码即可。在视觉上，如果你只需向用户呈现两种鼠标状态（“正常”与“高亮”）中的一种，这一技巧会非常好用。
当你想要添加第三个按钮状态时，问题就变得复杂起来。例如，考虑一下包含几个按钮的工具条。这时，当鼠标指针滑过它们时，你不仅需要“高亮”按钮，还需要表明哪个按钮当前“被点击”。因此，就需要在JavaScript代码中包含另一个按钮状态（“被点击”状态），以及所引发的新情况。例如，当鼠标指针滑过按钮时，虽然按钮的状态应由“正常”变为“高亮”，但在另一个按钮被点击（或工具打条恢复到默认设置）前，“被点击”（选择）按钮不应改变其状态。
这正是本文希望解决的问题。我们将引导你应用JavaScript与DOM建立一个三种状态的工具条，它能准确而高效地处理不同的按钮状态，以及它们之间的相互依赖性。
（1
）为不同的按钮状态建立图片
第一步是创建工具条中的图片。通常，它们是以图像形式提交的菜单项。记住，每个按钮要有三幅图片，分别用于正常、高亮与被点击状态。
在下面的例子中，我们假定一个包含四个按钮的工具条，总共有十二幅图片。为了方便，我们将这些图片命名为：imageXX_n.gif，imageXX_h.gif与imageXX_c.gif。当然，你可以以任何方式给它们命名。
一旦为每种按钮状态建立好图片，将它们保存在网络服务器根目录下的工具目录中，然后进入下一步。
（2
）在HTML
中建立工具条
工具条实质上是一个单行的HTML表，每个单元对应一个按钮。如列表A所示。
列表A
<html>
<head></head>
<body>
?<table id="toolbar">
?<tr>
?<td><img id="1"src="image1_n.gif" width="50" height="50" border="0"></td>
?<td><img id="2"src="image2_n.gif" width="50" height="50" border="0"></td>
?<td><img id="3"src="image3_n.gif" width="50" height="50" border="0"></td>
?<td><img id="4"src="image4_n.gif" width="50" height="50" border="0"></td>
?</tr>
?</table>
</body>
当然，对于如何建立这样的工具条，并没有硬性规定。如果你喜欢，你也可以将它垂直排列，或是使用不同的行列结构。重要的是保留指定给外部<表格>与单个按钮图片的ID。在接下来的步骤中，这些迟早会派上用场。
（3
）添加图片交换代码
接着，我们应用JavaScript来管理各种图片状态。首先，我们建立一个二维数组来保存每个按钮状态的图片文件名（列表B）。
列表B
// define toolbar button images for each state
// (normal, highlight, click)
vartoolbarData = new Array();
toolbarData[1] = new Array('image1_n.gif', 'image1_h.gif', 'image1_c.gif');
toolbarData[2] = new Array('image2_n.gif', 'image2_h.gif', 'image2_c.gif');
toolbarData[3] = new Array('image3_n.gif', 'image3_h.gif', 'image3_c.gif');
toolbarData[4] = new Array('image4_n.gif', 'image4_h.gif', 'image4_c.gif');
你还需要一个总是“知道”当前哪个按钮被选的全程变量。假定在起始阶段，没有工具条按钮被选中，所以开始时，该变量被赋予一个虚假的值。
// store the ID of the currently clicked button
varcurrentSelection = -1;?// -1 = initial dummy value
注：如果你想要你的工具条以一个已经“被点击”的按钮开始，你应该对上面的变量作出修改，以反映那个按钮的ID
，并同时修改在上一步中创建的HTML
表格中的对应初始图片。
图片交换的实际过程通过两个用户定义的函数——highlightItem()与selectItem()——来执行。highlightItem()函数负责交换按钮的“正常”与“高亮”状态，如列表C所示。
列表C
// function to change button state on hover
function highlightItem(obj, state) {
?// get button ID
?i = obj.getAttribute('id');
?
?// check if it is currently clicked
?// if not, change state (normal=0, highlight=1)
?if (i != currentSelection) {
?if (state == 1) {
?obj.setAttribute('src', toolbarData[i][1]);
?} else {
?obj.setAttribute('src', toolbarData[i][0]);
?}?
?}
}
当鼠标指针滑过一个工具条按钮时，它向highlightItem()函数发送一个参考值（用它来获取按钮的ID）与一个状态（非1则0，依按钮是“高亮”还是“正常”状态而定）。然后再将按钮的ID与全程变量currentSelection的值进行比较，保证此按钮没有处于“被点击”状态。假定它没有处于“被点击”状态，则按钮的状态发生改变。
SelectItem()函数负责将按钮的状态改变成“正常”或“高亮”或“被点击”。如列表D所示。
列表D
// function to change button state on click
function selectItem(obj) {
?// get button ID
?i = obj.getAttribute('id');
?
?// reset all toolbar buttons to normal
?tbar = document.getElementById('toolbar');
?items = tbar.getElementsByTagName('img');
?for (x = 0; x < items.length; x++) {
?items[x].setAttribute('src', toolbarData[(x+1)][0]);
?}
?
?// set selected button to click state
?obj.setAttribute('src', toolbarData[i][2]);
?
?// publish ID of clicked button
?currentSelection = i;
}
此函数向被点击的按钮提交一个参考值。它首先将所有的工具条按钮恢复为“正常”状态（消除两个按钮被同时点击的可能性），然后改变所选按钮的状态。它还将按钮的ID输出给全程变量currentSelection，以便按钮不会被highlightItem()函数的行为所影响。
（4
）为工具条按钮添加事件处理器
现在只需给各个工具条按钮添加事件处理器了。一般情况下，我们需要onMouseOver，onMouseOut和onClick事件处理器。例如：
<img id="1" src="image1_n.gif" onMouseOver="highlightItem(this, 1)" onMouseOut="highlightItem(this, 0)" onClick="selectItem(this)" width="50" height="50" border="0">
列表E将所有的代码集合在一个脚本中。
列表E
<html>
<head>
<script language="JavaScript">
// define toolbar button images for each state
// (normal, highlight, click)
vartoolbarData = new Array();
toolbarData[1] = new Array('image1_n.gif', 'image1_h.gif', 'image1_c.gif');
toolbarData[2] = new Array('image2_n.gif', 'image2_h.gif', 'image2_c.gif');
toolbarData[3] = new Array('image3_n.gif', 'image3_h.gif', 'image3_c.gif');
toolbarData[4] = new Array('image4_n.gif', 'image4_h.gif', 'image4_c.gif');
// store the ID of the currently clicked button
varcurrentSelection = -1;?// -1 = initial dummy value
// function to change button state on hover
function highlightItem(obj, state) {
?// get button ID
?i = obj.getAttribute('id');
?
?// check if it is currently clicked
?// if not, change state (normal=0, highlight=1)
?if (i != currentSelection) {
?if (state == 1) {
?obj.setAttribute('src', toolbarData[i][1]);
?} else {
?obj.setAttribute('src', toolbarData[i][0]);
?}?
?}
}
// function to change button state on click
function selectItem(obj) {
?// get button ID
?i = obj.getAttribute('id');
?
?// reset all toolbar buttons to normal
?tbar = document.getElementById('toolbar');
?items = tbar.getElementsByTagName('img');
?for (x = 0; x < items.length; x++) {
?items[x].setAttribute('src', toolbarData[(x+1)][0]);
?}
?
?// set selected button to click state
?obj.setAttribute('src', toolbarData[i][2]);
?
?// publish ID of clicked button
?currentSelection = i;
}
</script>
</head>
<body>
?<table id="toolbar">
?<tr>
?<td><img id="1" src="image1_n.gif" onMouseOver="highlightItem(this, 1)" onMouseOut="highlightItem(this, 0)" onClick="selectItem(this)" width="50" height="50" border="0"></td>
?<td><img id="2" src="image2_n.gif" onMouseOver="highlightItem(this, 1)" onMouseOut="highlightItem(this, 0)" onClick="selectItem(this)" width="50" height="50" border="0"></td>
?<td><img id="3" src="image3_n.gif" onMouseOver="highlightItem(this, 1)" onMouseOut="highlightItem(this, 0)" onClick="selectItem(this)" width="50" height="50" border="0"></td>
?<td><img id="4" src="image4_n.gif" onMouseOver="highlightItem(this, 1)" onMouseOut="highlightItem(this, 0)" onClick="selectItem(this)" width="50" height="50" border="0"></td>
?</tr>
?</table>
</body>
|