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

这就是映射图像（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. css3 2d转换3d转换以及动画的知识点汇总

    css3 2d转换 2d转换的方法: 1.移动 translate(x, y) 可以改变元素的位置,x.y可为负值: 2.缩放 scale(x, y) 可以对元素进行水平和垂直方向的缩放,x.y的取值 ...

  2. NMEA-0183协议解析

    NMEA-0183 NMEA 0183是美国国家海洋电子协会(National Marine Electronics Association )为海用电子设备制定的标准格式.目前业已成了GPS导航设备 ...

  3. jQuery 学习总结（上）

    第二章:基础选择器 第三章:过滤性选择器 第四章:表单选择器 第五章:jQuery  操作DOM 第六章:jQuery 事件与应用 第七章:jQuery 实现ajax应用

  4. java_XML_JAXB

    JAXB 可以实现Java对象与XML的相互转换,在JAXB中,将一个Java对象转换为XML的过程称之为Marshal,将XML转换为Java对象的过程称之为UnMarshal. 下面使用的是JDK ...

  5. PowerShell 批量修改AD属性

    环境:win 2008 R2 在管理工具中打开用于 windows powershell 的ActiveDirectory模块命令行窗口或打开命令提示符窗口输入PowerShell回车再输入impor ...

  6. iOS ReactiveCocoa(RAC)学习详解

    概述: ReactiveCocoa(简称为RAC),是由Github开源的一个应用于iOS和OS开发的一个框架,有时间,自己也了解学习了一下这个框架的一些基本的应用,其实你要学的话网上是有很多很多的博 ...

  7. [Linux] PHP程序员玩转Linux系列-怎么安装使用

    现在服务器主流都是Linux系统,主流发行版是CentOS,最新的CentOS版本号是7.3,我公司使用的是CentOS6.5,所以,我还是主要去学习6.x版本的CentOS.桌面版的Linux系统中 ...

  8. STL中sort排序算法第三个参数_Compare的实现本质

    关于C++ STL vector 中的sort排序算法有三种自定义实现,它们本质上都是返回bool类型,提供给sort函数作为第三个参数. 重载运算符 全局的比较函数 函数对象 我认为从实现方式看,重 ...

  9. 浅谈Java单例模式

    关于基本的懒汉式,饿汉式等写法网上介绍多如牛毛,这里不再赘述,直接讨论加了volatile关键字的双重锁(Double check),静态内部类以及枚举等写法,如有不对,恳请读者指出,欢迎讨论. 1. ...

  10. 征服恐惧！用 Vim 写 iOS App

    我们都知道 Vim 和 Emacs 都是文本编辑器中的上古神器,你也许用 ctags,cscopes 配合 Vim 完成过大型 C 或者 C++ 的开发,你也许配合过其他插件,完成过 JavaScri ...