在DW中给图像做链接，将链接的内容显示在链接到网页指定位置置

来源：蜘蛛抓取(WebSpider) 时间：2016-02-24 05:50 标签： dw链接本页面其他位置
运用Dreamweaver制作地图(热点图像区域)链接的方法_百科369
> 运用Dreamweaver制作地图(热点图像区域)链接的方法运用Dreamweaver制作地图(热点图像区域)链接的方法日00:02&&&&百科369我们浏览网页时，经常看到一些图片上会出现特别的超链接，即在一张图片上有多个局部区域和不同的网页链接，比如地图链接。
这就是映射图像（Image Map），它是指一幅根据链接对象不同而被人为划分为若干指向不同链接的区域或&热点&（Hotspots）的相应图像区域，当点击设置好的&热点&时，会弹出链接的相应页面。
Dreamweaver制作映射图像――热点图像区域
现在就利用Dreamweaver CS5的图像热点功能制作一个地图链接的实例。
1. 在 Dreamweaver CS5 中新建一个HTML文件取名为 map.html，选择“插入”菜单，“图像”选项，如下图所示：
在页面中插入中国地图图像。
2. 绘制热点区域。单击页面上的中国地图，选择底部“属性”栏中的“矩形热点工具”在地图上绘制热点区域，如下图所示：
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"&
&meta http-equiv="Content-Type" content="text/ charset=gb2312" /&
&title&运用Dreamweaver制作地图(热点图像区域)链接的方法示例-&/title&
&p&&img src="append/.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="云南介绍" /&
&p&注：选择制作的热点区域：新疆、青海、云南，点击查看效果！&/p&
阅读排行榜精华推荐&&&&&&&&&&&&推荐标签　　　　　　　Copyright&
All Rights Reserved热门搜索：
您的位置： -&
软件教程分类查找
非常抱歉！2345软件大全没能为您提供完善服务，万分感谢能得到您的指点！
您的建议：
第二章 网页中的色彩特性
第三章 用户界面
第四章 快捷键
第二章 管理站点文件
第三章 打开保存网页
第二章 插入特殊文本
第二章 图像元素设置
第三章 音频设置
第二章 创建超链接
第三章 管理超链接
第二章 框架布局
第三章 div+css布局
精品软件课程
人气：356899
Dreamweaver是网页制作和管理的所见即所得
人气：656169
Adobe Flash，是Macromedia公司（现被Adob
人气：58656
是个原本由Macromedia公司所开发的著名网站
人气：267600
MySQL是一个小型关系型数据库管理系统，被
小游戏推荐
Dreamweaver怎么添加图像热点链接
出处：2345软件大全
人气：19925
您可能感兴趣的问题：
相关下载：
核心提示：有时候我们制作的网页是用图片组成的，那么怎么在图片上添加超链接呢？这时我们可以使用使用dreamweaver中的图像热点链接。
　　有时候我们制作的网页是用图片组成的，那么怎么在图片上添加超链接呢?这时我们可以使用使用dreamweaver中的图像热点链接。
　　首先选中需要添加链接的图片，在软件下方的属性窗口中，我们可以看到“地图”项。
　　选择某种形状，并且在图片中用鼠标进行拖动，选中需要添加链接的部分，如下图所示。
　　选中添加链接的图片区域后，在属性窗口链接中就可以拖动“指向文件”按钮，为图片添加超链接。
　　超链接添加完成后，我们就在图片区域创建好了链接。
相关教程推荐
相关软件推荐
资源统计：无插件软件：93832个 无病毒软件：94126个 昨日已处理144个带插件、病毒的软件
本站总软件：94126个 软件总下载次数：23.347亿次
软件教程文章：92641篇 总浏览次数：2.897亿次如何在图片的任意位置添加链接&Dreamweaver添加热点
一、准备一张图片。
二、打开Dreamweaver，新建一个网页，将图片插入到页面中，具体方法我就不多说了，不会的同学猛击学习新建网页和插入图片的基础知识。
三、鼠标左键点中图片，这时候软件下方的属性面板就会变成和图片相关的属性，注意看左下角部分，如图一中的红色框内所示。
四、注意方块、圆形、多边形三个小图标，它们就是我们要用的“图片热点”工具，先点击方块按钮，将鼠标移动到图片上，这时候鼠标就变成了十字，在你想加链接的地方画一个方块。
五、方块画好后，下面的属性面板就会变成该方块区域的属性，如图二，按照属性面板上的选项填上相应的内容就可以了，“链接”就是点击此处跳转的链接地址；“目标”就是点击此处时窗口的打开方式；“替换”就是鼠标悬浮在该区域时提示的文字。
六、依照上面的方法，选中图片，点击圆形按钮，在图片上新建一个圆形热点。完成后可再使用多边形按钮新建一个多边形热点。热点最终效果如图三所示。制作完毕，点击图片上的热点区域可以随意挪动，也可以修改任意的属性。
七、大功告成，现在就预览一下吧，鼠标点击到热点区域上时，会弹出新窗口，而且在图片上还会出现你所制作的热点形状，如图四。
八、热点添加完毕后，查看页面源代码，你会发现在代码最底下多出几行内容，这些就是热点生成的：
&map name="Map"
&area shape="rect" coords="67,8,213,38"
href="" target="_blank"
alt="dreamweaver" /&
&area shape="circle" coords="273,70,33"
href="" target="_blank"
alt="dreamweaver" /&
&area shape="poly"
coords="352,71,384,34,417,69,387,99"
href="" target="_blank"
alt="dreamweaver" /&
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。

我要回帖

更多关于 dw链接本页面其他位置 的文章

 

随机推荐