标题: 图像和他们的热点
作者: admin
日期: 2006-08-18 06:08 PM
分类: 网页设计
内容: 一、Dreamweaver如何编排图片及其热点
将两张图置于一个页面中，并分别放置了两个热点，如下图：
Dreamweaver生成的代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>图像和他们的热点</title>
</head>
<body>
<p><img src="01.jpg" width="400" height="100" border="0" usemap="#Map" />
<map name="Map" id="Map">
<area shape="rect" coords="13,22,92,68" href="http://www.mzwu.com/" />
<area shape="rect" coords="238,25,318,68" href="http://www.163.com/" />
</map></p>
<p><img src="02.jpg" width="400" height="100" border="0" usemap="#Map2" />
<map name="Map2" id="Map2"><area shape="rect" coords="18,37,99,78"
href="http://www.hao123.com/" />
<area shape="rect" coords="236,37,332,73" href="http://www.mzwu.com/" />
</map></p>
</body>
</html>
不难看出，不同图片的热点Dreamweaver是有对它们进行分类的，将同一张图片上的热点归为一类，并用
name&id命名，图片要引用其热点时只须在usemap属性中注明热点的名字即可。
二、让我们来发现一点什么
当从Dreamweaver删除一张图片时，例如删除01.jpg，则其所对应的热点类Map也将消失。
三、问题来了
有时因需要01.jpg和02.jpg只能出现一次，下边哪种方案可行？
方案一：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>图像和他们的热点</title>
<script type="text/javascript">
function showdiv1() {
document.getElementById("div1").style.display = "";
document.getElementById("div2").style.display = "none";
}
function showdiv2() {
document.getElementById("div1").style.display = "none";
document.getElementById("div2").style.display = "";
}
</script>
</head>
<body>
<div align="left" id="div1" onclick="showdiv2();">
<img src="01.jpg" width="400" height="100" border="0" usemap="#Map" />
<map name="Map" id="Map">
<area shape="rect" coords="13,22,92,68" href="http://www.mzwu.com/" />
<area shape="rect" coords="238,25,318,68" href="http://www.163.com/" />
</map>
</div>
<div align="left" id="div2" onclick="showdiv1();" style="display: none">
<img src="02.jpg" width="400" height="100" border="0" usemap="#Map2" />
<map name="Map2" id="Map2">
<area shape="rect" coords="18,37,99,78" href="http://www.hao123.com/" />
<area shape="rect" coords="236,37,332,73" href="http://www.mzwu.com/" />
</map>
</div>
</body>
</html>
方案二：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>图像和他们的热点</title>
<script type="text/javascript">
function showdiv1() {
document.getElementById("div1").style.display = "";
document.getElementById("div2").style.display = "none";
}
function showdiv2() {
document.getElementById("div1").style.display = "none";
document.getElementById("div2").style.display = "";
}
</script>
</head>
<body>
<div align="left" id="div1" onclick="showdiv2();">
<img src="01.jpg" width="400" height="100" border="0" usemap="#Map" />
</div>
<div align="left" id="div2" onclick="showdiv1();" style="display: none">
<img src="02.jpg" width="400" height="100" border="0" usemap="#Map2" />
</div>
<map name="Map" id="Map">
<area shape="rect" coords="13,22,92,68" href="http://www.mzwu.com/" />
<area shape="rect" coords="238,25,318,68" href="http://www.163.com/" />
</map>
<map name="Map2" id="Map2">
<area shape="rect" coords="18,37,99,78" href="http://www.hao123.com/" />
<area shape="rect" coords="236,37,332,73" href="http://www.mzwu.com/" />
</map>
</body>
</html>
结果表明两种方法都能完美的实现我们要的效果，实际中，我们就可以根据具体的情况选择其一来解决我
们碰到的问题。
+ 查看当前日志评论 (1)
────────────
PJBlog3 v3.2.9.518 Inside.
Processed In 0.063 ms
标题: 图像和他们的热点
你没有权限发表评论
────────────
PJBlog3 v3.2.9.518 Inside.
Processed In 0.063 ms
暂无评论
────────────
PJBlog3 v3.2.9.518 Inside.
Processed In 0.063 ms