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

这就是映射图像（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. 数据挖掘之聚类算法K-Means总结

    序 由于项目需要,需要对数据进行处理,故而又要滚回来看看paper,做点小功课,这篇文章只是简单的总结一下基础的Kmeans算法思想以及实现: 正文: 1.基础Kmeans算法. Kmeans算法的属 ...

  2. 【js编程艺术】小制作五

    1.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <ti ...

  3. 蓝桥网试题 java 入门训练 A+B问题

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

  4. HUST 1584 摆放餐桌

    1584 - 摆放餐桌 时间限制:1秒 内存限制:128兆 609 次提交 114 次通过 题目描述 BG准备在家办一个圣诞晚宴,他用一张大桌子招待来访的客人.这张桌子是一个圆形的,半径为R.BG邀请 ...

  5. 5个Android开发中比较常见的内存泄漏问题及解决办法

    android中一个对象已经不需要了,但是其他对象还持有他的引用,导致他不能回收,导致这个对象暂存在内存中,这样内存泄漏就出现了.   内存泄漏出现多了,会是应用占用过多的没存,当占用的内存超过了系统 ...

  6. IOS任务管理之GCD使用

    前言: 前天学了IOS的NSOperation基本使用,我们得知NSOperation也是基于IOS GCD(Grand Central Dispatch)实现,其实在做IOS开发中GCD已经基本上能 ...

  7. 读书笔记 effective c++ Item 17 使用单独语句将new出来的对象放入智能指针

    1. 可能会出现资源泄漏的一种用法 假设我们有一个获取进程优先权的函数,还有一个在动态分类的Widget对象上根据进程优先权进行一些操作的函数: int priority(); void proces ...

  8. python 库安装笔记

    python 库安装笔记 zoerywzhou@163.com http://www.cnblogs.com/swje/ 作者:Zhouwan 2017-2-22 友情提示 安装python库的过程中 ...

  9. JavaScript 基本类型值-Undefined、Null、Boolean

    ▓▓▓▓▓▓ 大致介绍 ECMAScript中有5中简单的数据类型(也称为基本数据类型):Undefined.Null.Boolean.Number.String. ▓▓▓▓▓▓ Undefined ...

  10. 几分钟看完 flow.ci 全部功能

    从 0 到 1,从邀请式内测到收费上线,flow.ci 经历了十个多月的沉淀与打磨.这期间,flow.ci 工程师们奋力赶工,进行了一系列的大功能更新,Bug 修复,功能优化. 这篇文章记录了 flo ...