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

这就是映射图像（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. SQL Server-索引故事的遥远由来，原来是这样的？

    前言 前段时间工作比较忙,每天回来也时不时去写有关ASP.NET Core的文章,无论是项目当中遇到的也好还是自学的也好都比较严谨的去叙述,喜欢分享,乐于分享这是我一直以来的态度,当然从中也会有些许错 ...

  2. ubuntu14.04下手动安装eclipse

    ubuntu14.04下手动安装eclipse 第一步: 安装jdk 第二步: 下载eclipse,假设下载的文件文件名为eclipse.tar.gz 第三步: 解压 sudo -zxvf ./ecl ...

  3. js获取当前时间戳

    当使用js时我们可以使用timestamp = (new Date()).valueOf();直接获取当前时区时间点的时间戳.注意:js中时间戳的单位是毫秒,而php中则是秒

  4. java 重写的学习

    本文全文转自:http://www.cnblogs.com/happyframework/p/3332243.html,非常感谢 Java中的重写规则比较灵活,具体如下: 除了 private 修饰之 ...

  5. mycat

    mycat系列: mycat系列-概述 Cobar的十个秘密之一 Cobar的十个秘密之二 Cobar的十个秘密之三 Cobar的十个秘密之四 Cobar的十个秘密之五 Cobar的十个秘密之六 Co ...

  6. 安装msdn出现的问题及解决

    安装msdn出现的问题及解决 用xx.iso 镜象文件安装 运行第一个镜象文件的setup.exe安装到一部分提示:安装程序无法打开文件 C:\Documents and Settings\empty ...

  7. 【openstack N版】——走进云计算

    一．云计算 云计算是一种按使用量付费的模式,这种模式提供可用的.便捷的.按需的网络访问,进入可配置的计算资源共享池(资源包括:网络.服务器.存储.应用软件.服务),这些资源能够被快速提供,只需投入很少 ...

  8. fiddler介绍

    先看fiddler 的使用界面和各模块的功能介绍 1请求列表:请求列表中包含了许多信息,从左至右依次为,#(序列号),Result(结果状态码),Prottocol(请求的协议),Host(请求的主机 ...

  9. 地图定位CoreLocation框架,地理位置编码与反编码

    在现代互联网时代,越来越多的应用,都用到了地图定位功能,在iOS开发中,想要加入这种功能,必须基于两个框架进行开发: 1.Map Kit:用于显示地图, 2.CoreLocation:用于显示地理位置 ...

  10. Ubuntu 小白安装血泪史

    介绍: 新入手的Ubuntu:版本 命令行模式下 出现 ♦♦♦♦ 图形界面无法获取最高权限:gurb.cfg 无法再图形界面下修改 安装类型: 1.安装Ubuntu,与Window 7共存 2.清除整 ...