我们浏览网页时，经常看到一些图片上会出现特别的超链接，即在一张图片上有多个局部区域和不同的网页链接，比如地图链接。

这就是映射图像（Image Map），它是指一幅根据链接对象不同而被人为划分为若干指向不同链接的区域或“热点”（Hotspots）的相应图像区域，当点击设置好的“热点”时，会弹出链接的相应页面。

Dreamweaver制作映射图像——热点图像区域

现在就利用Dreamweaver CS5的图像热点功能制作一个地图链接的实例。

1. 在 Dreamweaver CS5 中新建一个HTML文件取名为 map.html，选择“插入”菜单，“图像”选项，如下图所示：

在页面中插入中国地图图像。

2. 绘制热点区域。(在dw上  点击  设计模式   )单击页面上的中国地图，选择底部“属性”栏中的“矩形热点工具”在地图上绘制热点区域，如下图所示：

3. 当绘制完矩形热点区域后，或者重新选择绘制好的矩形热点区域后，图像属性面板将变成热点属性面板。在“链接”框中选择热点区域所要链接的目标网页，在“目标”框中选择“_blank”，使链接的网页在新窗口中打开，在“替换”框中填入相关的提示说明。如下图所示：

提示：在这里将“目标”设置为“_blank”表示在新的浏览器窗口中打开被链接的文档，并保持当前窗口可用。“目标”框中其他各选项的含义是：

1）“_parent”代表在链接所在的父框架集中打开链接文档；

2）“_self”代表在当前框架中打开链接文档，替换该框架中的内容；

3）“_top”代表在当前文档的最外层框架集中打开链接文档，替换所有框架中的内容。

4. 绘制其他热点区域。使用属性面板中的另外两个热点工具“圆形热点工具”和“多边形热点工具”同样可以在地图上绘制热点并设置相关的热点属性，其使用方法和“矩形热点工具”相同。

现在在地图上继续绘制其他热点区域并设置链接，最终效果下图所示：

提示：使用“多边形热点工具”时，先选择工具，在要绘制的区域点击鼠标左键，这时会弹出一个对话框，不用管它，直接点“确定”，然后继续单击鼠标左键，此时会看到在点击的区域，每多点击一次，绘制的图形就会变换一次，按此方法就可以绘制出你想要的多边形了。

5. 保存页面文件并按 F12 键进行预览。至此，本实例操作完毕。

示例

源代码如下：

<!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>运用Dreamweaver制作地图(热点图像区域)链接的方法示例-www.baike369.com</title>

</head>

<body>

<p><img src="append/2011929001.jpg" width="387" height="329" border="0" usemap="#Map" /></p>

<map name="Map" id="Map">

  <area shape="rect" coords="57,75,128,133" href="append/xinjiang.html" target="_blank" alt="新疆介绍" />

  <area shape="circle" coords="159,170,32" href="append/qinghai.html" target="_blank" alt="青海介绍" />

  <area shape="poly" coords="162,238,159,261,161,274,176,286,199,282,206,276,202,255,185,255,177,243,169,233,163,231,162" href="append/yunnan.html" target="_blank" alt="云南介绍" />

</map>

<p>注：选择制作的热点区域：新疆、青海、云南，点击查看效果！</p>

</body>

</html>

日期：207.3.20    赖忠标    记

dreamweaver中的 map怎么调用?_制作热点图像区域的更多相关文章

  1. Don’t Use Accessor Methods in Initializer Methods and dealloc 【初始化和dealloc方法中不要调用属性的存取方法，而要直接调用 _实例变量】

    1.问题:    在dealloc方法中使用[self.xxx release]和[xxx release]的区别? 用Xcode的Analyze分析我的Project,会列出一堆如下的提示:Inco ...

  2. pageadmin CMS网站制作教程:模板中的站点数据调用

    pageadmin CMS网站建设教程:模板中的站点数据调用 1.获取当前站点Id,返回int数字 Html.CurrentSiteId() 2.获取当前站点url地址,返回string字符串 Htm ...

  3. python中multiprocessing.pool函数介绍_正在拉磨_新浪博客

    python中multiprocessing.pool函数介绍_正在拉磨_新浪博客     python中multiprocessing.pool函数介绍    (2010-06-10 03:46:5 ...

  4. C/S模式开发中如何利用WebBrowser控件制作导航窗体

    原文:C/S模式开发中如何利用WebBrowser控件制作导航窗体 转自: CSDN 相信不少同学们都做过MIS系统的开发,今天这里不讨论B/S模式开发的问题.来谈谈winform开发.用过市面上常见 ...

  5. 编程中的链式调用：Scala示例

    编程中的链式调用与Linux Shell 中的管道类似.Linux Shell 中的管道 ,会将管道连接的上一个程序的结果, 传递给管道连接的下一个程序作为参数进行处理,依次串联起N个实用程序形成流水 ...

  6. ES6中的Map集合（与java里类似）

    Set类型可以用来处理列表中的值,但是不适用于处理键值对这样的信息结构.ES6也添加了Map集合来解决类似的问题 一.Map集合 JS的对象(Object),本质上是键值对的集合(Hash结构),但是 ...

  7. Map java中的map 如何修改Map中的对应元素

    Map java中的map 如何修改Map中的对应元素 Map以按键/数值对的形式存储数据,和数组非常相似,在数组中存在的索引,它们本身也是对象.         Map的接口         Map ...

  8. Java中遍历Map集合的四种方法

    在Java中如何遍历Map对象 How to Iterate Over a Map in Java 在java中遍历Map有不少的方法.我们看一下最常用的方法及其优缺点. 既然java中的所有map都 ...

  9. AutoMapper中的Map和DynamicMap——高手注重细节,思考和总结

    近日在做项目的时候,遇到了个怪问题,关于AutoMapper的细节问题,也是不为一般人所关注的. 本人研究AutoMapper也没有多长时间,而且研究的过程中也写了关于AutoMapper的系列基础教 ...

随机推荐

  1. Spring 4 MVC+Hibernate 4+MySQL+Maven使用注解集成实例

    Spring 4 MVC+Hibernate 4+MySQL+Maven使用注解集成实例 转自:通过注解的方式集成Spring 4 MVC+Hibernate 4+MySQL+Maven,开发项目样例 ...

  2. 使用php实现网站验证码功能【博主推荐】

             验证码是网站常用的一项安全措施,也是新人站长较难掌握的一项技能,这里我向大家介绍一简单有效的验证码实现方法. 开始之前 在正式开始之前我们需要打开php的gd2图形库支持(在php. ...

  3. 使用vlmcsd自建KMS服务~一句命令激活windows/office

    服务作用:在线激活windows和office 适用对象:VOL版本的windows和office 适用版本:截止到win10和office2016的所有版本 服务时间:24H,偶尔更新维护 优点:在 ...

  4. C语言的函数类型

    C语言的函数类型与返回值类型不一致时出现,是以函数类型为标准; 而如果在java与c#语言中上述情况是编译错误的;

  5. 读书笔记 effective c++ Item 14 对资源管理类的拷贝行为要谨慎

    1. 自己实现一个资源管理类 Item 13中介绍了 “资源获取之时也是初始化之时(RAII)”的概念,这个概念被当作资源管理类的“脊柱“,也描述了auto_ptr和tr1::shared_ptr是如 ...

  6. TCP协议详解

    TCP协议详解 一.TCP协议 1.TCP 通过以下方式提供可靠性: ·  ◆ 应用程序分割为TCP认为最合适发送的数据块.由TCP传递给IP的信息单位叫做报文段. ·  ◆ 当TCP发出一个报文段后 ...

  7. jQuery_第四章_思维图

    ---------------------------------------------------------------------------------------------------- ...

  8. HTML学习二

    继续上一次的学习: <html> <head> <title>新增雇员</title> <script language="javasc ...

  9. oracle系列笔记(2)---多表查询

    多表查询     这篇文章主要讲四点: (1)oracle多表查询    (2)SQL99标准的连接查询   (3)子查询     (4)分级查询 oracle多表查询有两种方式,一种是oracle所 ...

  10. HTTP和HTTPS协议

    网络协议为计算机网络中进行数据交换而建立的规则.标准或约定的集合. URL:就是网址.http://www.hcios.com/archives/1547 URL就是资源的地址,位置.互联网上的每一个 ...