网页设计 订阅所有【网页设计】的日志

图像和他们的热点

编辑:admin 日期:2006-08-18

字体大小: 小 中 大
一、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>

结果表明两种方法都能完美的实现我们要的效果，实际中，我们就可以根据具体的情况选择其一来解决我

们碰到的问题。

上一篇: 一个链接打开多个页面解决方案
下一篇: Dreamweaver中如何删除热点
文章来自: 本站原创
引用通告: 查看所有引用 | 我要引用此文章
Tags:
最新日志:
评论: 1 | 引用: 0 | 查看次数: 4521
发表评论
请登录后再发表评论！