|
用JavaScript 制 作 提 示 效 果四 川 省 绵 阳 市 临 园 中 路 袁 勐---- HTML 是 一 个 功 能 强 大 的 描 述 型 语 言， 用 它 制 作 的 主 页 含 有 超 级 链 接， 可 以 方 便 地 在 不 同 的 页 面 间 跳 转。 而 且 可 以 包 含 各 种 图 片、 声 音、 甚 至 视 频 等 多 媒 体 效 果。 然 而 它 也 不 是 万 能 的， 如 果 与JAVA 或JavaScript 语 言 结 合 起 来 就 能 设 计 出 一 些 特 殊 的 效 果。 ---- 本 文 介 绍 一 种 提 示 效 果。 在 页 面 上 鼠 标 指 在 图 片 上， 图 片 的 正 下 方 就 会 出 现 与 该 图 片 有 关 的 提 示。 以 下 是 一 个 示 例 页 面。
< html >
< head >
< meta HTTP-EQUIV="expires" CONTENT="October 23, 1971" >
< script LANGUAGE="JavaScript" >
// 定 义 变 量 和 初 始 化 空 白 图 形
if(document.images)
{ text0=new Image()
text1=new Image()
text2=new Image()
text3=new Image()
text0.src="ex-blank.gif"
text1.src=text0.src
text2.src=text0.src
text3.src=text0.src
}
// 初 始 化 图 片 变 量 为 具 体 的 图 形 文 件
function initialize()
{
parent.che=true;
if(document.images)
{ text1.src="ex-1.gif"
text2.src="ex-2.gif"
text3.src="ex-3.gif"
}
}
// 显 示 提 示 图 片
function display(num)
{ if(document.images)
{ if (num=="0") document.holder.src=text0.src
if (num=="1") document.holder.src=text1.src
if (num=="2") document.holder.src=text2.src
if (num=="3") document.holder.src=text3.src
}
}
< /script >
< title> 测 试 提 示 < /title >
< /head >
< body BGCOLOR="#000000" onload="initialize()" >
< table border="0" width="100%"
cellpadding="0" cellspacing="0" height="180" >
< tr >
< td width="20%" height="29"
valign="middle" align="center" > < /td >
< td width="20%" height="29"
valign="middle" align="center" >
< p align="center" > < a
href="ex-1.html" onmouseover="display(1)"
onmouseout="display(0)" > < img
src="ex1.gif" border="0"
width="83" height="43" > < /a > < /td >
< td width="20%" height="29" valign="middle"
align="center" > < p align="center" > < a
href="ex-2.html" onmouseover="display(2)"
onmouseout="display(0)" > < img
src="ex2.gif" border="0" width="83"
height="43" > < /a > < /td >
< td width="20%" height="29" valign="middle"
align="center">
---- 该 示 例 中 一 开 始 定 义 了 三 个 图 型 变 量 并 初 始 化 为 一 空 白 图 形 文 件。function initialize() 的 作 用 是 在 加 载 该 页 面 时 初 始 化 图 片 变 量 为 具 体 的 图 形 文 件。function display(num) 的 作 用 是 按 不 同 的num 参 数 显 示 提 示 图 片。 所 用 的 四 张 图 形 文 件 大 小 均 为480X60， 其 中ex-blank.gif 为 一 透 明 空 白 图 片，ex-1.gif 为ex1.gif 的 提 示 图 片， 内 容 靠 左；ex-2.gif 为ex2.gif 的 提 示 图 片， 内 容 居 中；ex-3.gif 为ex3.gif 的 提 示 图 片， 内 容 靠 右。 这 样 就 产 生 出 提 示 效 果。 如 果 主 页 中 使 用 了 框 架， 将 上 面 的 程 序 作 简 单 的 修 改 就 可 以 产 生 跨 页 面 的 提 示 效 果。 |
||||