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

这就是映射图像（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. KB奇遇记(5)：奇葩的用人制度

    8月份入职,公司不给我们正式任命,导致了我们开展工作困难重重,基本上很少有人会鸟你,做事仿佛名不正言不顺.哪怕你是未来信息部的老大也一样,网管们根本不买你的账.所以做ERP选型,做旧OA的选型以及加密 ...

  2. windows下Visual Studio Code 1.9安装

    点击送你去官网下载vs code 进入下载页面如下 下载完成双击安装 安装完成打开之后如下图,最新版的默认中文就挺好的! 注意下面是微软建议: Note: .NET Framework 4.5.2 i ...

  3. 编写JQuery插件-1

    看到这篇文章的人相信大家都学会了jq,或者正在用jq,在这里简单介绍一下jq的插件封装: jQuery的插件主要分为3种类型: 1.封装对象方法的插件 这种插件是将对象的方法封装起来,用于对通过选择器 ...

  4. IPv4地址学习总结

    一. IPv4地址格式 网络互连的一个重要前提条件是要有一个有效的地址结构,并且所有的互连网络用户都应遵守这个地址结构.因为只有这样所有的互连网络用户才能在统一的规定下相互之间通讯.这个地址结构可以有 ...

  5. XmlHepler(拿去就能用)

    [系列目录](./XmlCatalog.html) 前言 本篇是这个系列的最后一篇.也是本人第一次写系列文章,虽然系列中大部分内容都是参考网络,但是自己都有敲代码验证.自己再编写过程中也学习到了很多知 ...

  6. IOS9.0 之后友盟分享详细过程

    一: 申请友盟的AppKey(友盟的Key是根据应用的名称生成的!) 在友盟注册了你自己的开发者账号后就可以申请AppKey了.然后在这个方法里面设置Key - (BOOL)application:( ...

  7. sping整合hibernate之二：dao层开发

     在上一篇日志中将hibernate的会话工厂sessionFactory注入到了spring的容器中,但这样还不够,因为hibernate的增删改查是要使用事务机制的, 所以还要在spring中配置 ...

  8. 阿里巴巴Java开发手册评述

    2016年底的时候阿里巴巴公开了其在内部使用的Java编程规范.随后进行了几次版本修订,目前的版本为v1.0.2版.下载地址可以在其官方社区-云栖社区https://yq.aliyun.com/art ...

  9. JAVA三大特性之一——封装

    自学java已经有一段时间了,但是感觉对于很多知识点还是有必要总结和整理一下,下面我就来说一下我对JAVA三大特性之一——封装特性的认识和理解. 封装,从字面意思可以看出来,就是包装,也就是把我们写好 ...

  10. 基于CPS变换的尾递归转换算法

    前言 众所周知,递归函数容易爆栈,究其原因,便是函数调用前需要先将参数.运行状态压栈,而递归则会导致函数的多次无返回调用,参数.状态积压在栈上,最终耗尽栈空间. 一个解决的办法是从算法上解决,把递归算 ...