任务2-8　图形菜单的动态响应

需求：

图形菜单的设计有如下要求：

①图形菜单要有动感，鼠标移入时菜单标题文本加粗、颜色变红；移出时菜单标题文本颜色变黑。

②图形菜单要能记忆：能记住单击过的菜单标题文本颜色变蓝；移出单击过的菜单后，其菜单标题文本颜色仍然保持蓝色。

③图形菜单要可响应：能在页面上显示超链接信息。

分析：

本任务涉及鼠标移入事件、移出事件、单击事件，用数组对象保存所有菜单标题，使用全局变量记录单击过的菜单编号。

实现：

第一步，新建文件夹08，复制任务2-7中的页面。

第二步，在3个图形菜单的标题＜div＞标签中添加鼠标移入移出事件属性，它们的设置基本相同，onmouseover设置为“div_mouseover（this）”，onmouseout设置为“div_mouseout（this）”。

第三步，编写图形菜单的标题＜div＞标签鼠标移入、移出事件处理函数，具体如清单2-19所示。

清单2-19　图形菜单鼠标移入、移出事件处理函数的定义

第四步，在3个图形菜单的标题＜div＞标签中添加相同的鼠标单击事件属性设置，onclick均设置为“div_click（this）”。

第五步，添加一个变量cur_act，用来记录当前被单击菜单的序号，设置其初值为0，修改移出事件的代码，使刚被单击的菜单标题保持蓝色文本。具体如清单2-20所示。

清单2-20　鼠标移出时保持被单击的菜单标题文本仍为蓝色

第六步，为菜单设置将打开的链接地址，添加一个id为info的＜div＞标签，并定义一个数组实例存储相应的链接地址。信息显示标签定义如清单2-21所示。

清单2-21　链接地址数组实例定义

第七步，编写图形菜单的标题＜div＞标签鼠标单击事件处理函数，以修改文本属性和激活属性，如清单2-22所示。

清单2-22　图形菜单单击事件处理函数的定义

说明

显示超链接停息只是为了表现可记忆的功能，其实可以使用语句直接将当前页面导航到相应的链接地址，如window.location.href=link[cur_act]。