帐号: 密码:
// 设为首页 // 收藏本站 // 请您留言 // 网址导航
远方教程-满足你的求知欲!
站内搜索:
HTML ASP PHP CSS DIV Dreamweaver Photoshop Word Excel PPT SEO技巧
您当前位置:网站首页 >> HTML入门 >> Dreamweaver入门教程 >> 阅读文章

用Dreamweaver建立图像的热区链接步骤

来源:远方教程 作者:远方教程 发布时间:2015-02-10 查看次数:11698 访问[新版]

    最近项目需要将一中国行政区划图的jpg图片加上按照省份区域的热区链接.其实热区链接用起来不难,麻烦的是如何取得每个省份边缘线的那一系列坐标值.幸好有工具帮我们实现,这里我把如何在Dreamweaver制作图象热区的操作步骤结合图形描述如下,希望能够给你带来帮助.

由于定义坐标比较复杂并且难以控制,一般情况下都使用可视化软件进行这种属性的设置。本节我们以Dreamweaver为例来进行讲解,其他软件的功能是类似的。具体方法如下:
  (1)建立网页文件,如上例的网页,但只放图像,而不必定义映射图像名以及热区。
  (2)启动Dreamweaver,选择"文件"菜单的"打开"命令,弹出"打开"对话框,在对话框中打开刚才建立的HTML文件,如下图所示。

Dreamweaver建立图像热区链接

(3)选择图片,在属性面板中设置"地图"的值为"taihu",也就是定义图像要引用的映射图像名。

图像热区链接

(4)设置热区。为了显示各种热区的效果,这里将不同的热区定义为不同的形状。单击"矩形热点工具",按住鼠标左键在图片适当位置拖动,绘制出一个矩形区域,如下图所示。

如何用Dreamweaver建立图像热区链接

(5)选中矩形区域后,在"链接"(对应href属性)文本框中添加链接地址"chap7_7meiyuan.html",在"目标"下拉列表(对应target属性)中选择"_blank",在"替代"(对应alt属性)文本框中设置选区的提示文字为"梅园",如下图所示。

图像热区

(8)再次单击图片,选择椭圆型热点工具,用类似的方法,在鼋头渚(读做:元头煮)附近设置一个椭圆型(实际上是圆形)选区,如下图所示。

HTML教程

(9)选中椭圆形区域后,在"链接"(对应href属性)文本框中添加链接地址"chap7_7yuantouzhu.html",在"目标"下拉列表(对应target属性)中选择"_blank",在"替代"(对应alt属性)文本框中设置选区的提示文字为"鼋头渚",如下图所示。

Dreamweaver建立图像热区

(10)再次单击图片,选择"多边形热点工具",依次单击热区的各个点,创建一个多边形区域,如下图所示。

Dreamweaver教程

(11)选中多边形区域后,在"链接"文本框中添加链接地址"chap7_7piaomiaofeng.html",在"目标"下拉列表中选择"_blank",在"替代"文本框中设置选区的提示文字为"缥缈峰",这里就不再图示了。
  (12)完成后保存文件,软件会自动生成相应的HTML代码,类似于在例7中显示的那样。其实,例7中的代码就是作者用Dreamweaver做好后简单修改得到的。

打印 打印 | 关闭 关闭 评论
相关文章
图片新闻
站内搜索  
搜索
猜您喜欢  
最新更新  
阅读排行  
关于我们 | 联系方式 | 大事记 | 免责声明 | | 给我留言
部分广告源自金山联盟2345联盟 QQ咨询 站长之家QQ群:232617873
Copyright 2024 远方教程 © All Rights Reserved.

回顶部