在浏览网页时,经常能看到一些图片上的特殊超链接,即在一张图片上有多个局部区域与不同的网页链接,比如地图链接。
效果说明:
地图中标示出了中国的各个省市和直辖市,当在地图上单击某个特定区域时,就会跳转到相应地图区的说明页面。
创作思想:
本实例将利用 Dreamweaver 的图像热点功能完成地图链接实例。
操作步骤
( 1 )新建一个HTML文件取名为 map.htm 文件,在页面中插入一幅中国地图,如图 1 所示。
提示:本实例所用到的中国地图china.jpg。
( 2 )绘制热点区域。单击页面上的中国地图,然后利用属性栏中的【矩形热点】工具在地图上绘制热点区域,如图 2 所示。
( 3 )当绘制完矩形热点区域后,图像属性面板将变成热点属性面板,如图 3 所示。在链接栏处选择热点区域所要链接的目标网页,在【替代】框中填入相关的提示说明,并使链接的网页在新窗口中打开。
提示:在这里将【目标】设置为 _blank 代表在新
的浏览器窗口中打开被链接的文档,并保持当前窗口可用。【目标】框中其他各选项的含义是, _parent 代表在链接所在的父框架集中打开链接文档;
_self 代表在当前框架中打开链接文档,替换该框架中的内容; _top 代表在当前文档的最外层框架集中打开链接文档,替换所有框架中的内容。
( 4
)绘制其他热点区域。使用属性面板中的另外两个热点工具【椭圆形热点】工具和【多边形热点】工具同样可以在地图上绘制热点并设置相关的热点属性,其使用方
法和【矩形热点】工具相同。大家可利用这 3 个热点工具在地图上继续绘制其他热点区域并设置链接,最终效果如图 4 所示。
( 5 )保存页面文件并按 F12 键进行预览。至此,本实例操作完毕。
在这里我只给大家绘制了3个省的区域!目的教给大家如何做这种网页,通过学习这个实例,是不是觉得很简单呢?当然你要想把整个地图都设置连接可是非常麻烦了啊!主要是浪费时间!这个教程就写到这了。
本实例的操作相对简单,但在制作过程中,必须细心的绘制各个区域;各个区域间最好留有一点空隙,以免在选择时出现错误。
分享到:
相关推荐
一款简单好用的弹出菜单的代码应用,用DW制作,简便易学
利用DW制作的个人简历,可以直接双击运行, <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> ; charset=utf-8" /> 个人简历 ...
<!DOCTYPE html> 计算机 table{border:1px solid gray;} td{width: 10px;height: 10px;border:1px groove gray;text-align: right;padding: 5px;margin: 5px;border-radius: 5px 5px 5px 5px;...
这是我大学交的网页作业,适合初学者在学习网页制作时学习使用。
NIT网页制作模块 DW网页制作真题 NIT网页制作模块 DW网页制作真题
dw制作的班级网站
留言板PDF文件,包括IIS服务器设置、前台后台管理等内容
一个不错的DW新闻发布制作教程,首先我们要明确,一个新闻发布系统所能实现的最基本的功能: 1、一般在网站的首页有新闻的标题列表(news_list.asp) 2、通过显示的新闻标题可以看到新闻的内容(news_detail.asp) 3、...
一个很简单的班级管理系统,链接了数据库,access。针对应付考试等而设计
NIT网页制作模块 DW网页制作真题 NIT网页制作模块 DW网页制作真题
大一课设制作,刚刚接触制作诸多不足,更多适合练习制作,没有技术可言。
网站制作dwcs3
不用代码手写编程制作动态ASP的教程 我自己花钱买来的大家不要拍砖
打印机驱动 HP277dw驱动打印机驱动 HP277dw驱动打印机驱动 HP277dw驱动打印机驱动 HP277dw驱动打印机驱动 HP277dw驱动打印机驱动 HP277dw驱动打印机驱动 HP277dw驱动打印机驱动 HP277dw驱动打印机驱动 HP277dw驱动...
NIT网页制作模块 NIT网页制作模块 DW网页制作真题
做网的一些经验,希望对大家有用
静态HTML家居装修网页设计成品共5个页面,使用JS制作了图片滚动,使用dreamweaver采用DIV CSS布局制作。
巧用DW制作拼图游戏借鉴.pdf
适合初学者学习的个人网页制作。是一个比较简单的个人网页。基于DW。
一个屏蔽文件,使用后永久使用,不会出现漏洞深的东西,是放心使用