首页 > 网站建设 >

网站建设怎么创建图像映射

发布时间:2019-10-07 作者:深圳网站建设

  图像映射是指将一个图像划分成多个区域,每一个区域都可以指定一个超链接,点击不同的区域会跳转到不同地址。深圳网站建设公司图像映射最经典的应用就是导航地图,当鼠标移动到地图上一个区域时,该区域的背景颜色呈现为灰色,并显示当前区域的名称,如图4.20所示。

  在HTML中,创建图像映射的关键在于使用<map>和<area>这两个元素。<map>元素用于指定图像映射的区域,必须为其指定一个name值,该值用于在<img>元素中设置使用哪个图像映射,<area>元素用于在图像地图中划分作用区域。
  一个<map>元素中可以有多个<area>元素,每个<area>元素指定一个映射区域。<area>元素中有两个非常重要的属性,shape和coords。shape用于指定映射区域的形状,目前可以设定的值有矩形(rect)、圆形(circle)和多边形(poligon),coords用于指定坐标点,详细使用方法如下:
<areashape="rect"coords="x1,y1,x2,y2"href=url>表示设定热点的形状为矩形,左上角顶点坐标为(x1,y1),右下角顶点坐标为(x2,y2)。
<areashape="circle"coords="x1,y1,r"href=url>表示设定热点的形状为圆形,圆心坐标为(x1,y1),半径为r。
<areashape="poligon"coords="x1,y1,x2,y2......"href=url>表示设定热点的形状为多边形,各顶点坐标依次为(x1,y1)、(x2,y2)、(x3,y3)......
  在Dreamweaver中,通过可视化操作,可以非常方便地为图像创建映射,详细操作步骤如下:
(1)在Dreamweaver中插入一幅图像。
(2)切换到设计视图,选中插入的图像,在窗口的下面的属性面板中可以看到用于设置映射的区域,如图4.21所示。
(3)单击绘制圆形映射的图标,在插入的图形中绘制一个圆形,然后单击图标,移动圆形到合适的位置,效果如图4.22所示。
(4)用同样的方法绘制其他映射区域,效果如图4.23所示。
(5)用鼠标选中一个绘制的映射区域,在属性面板中的“链接”位置输入一个链接地址,这样当鼠标单击该区域位置时,就会跳转到指定的页面,效果的图4.24所示。
(6)用同样的方法为其他映射区域添加链接地址,切换到代码视图,我们可以看到如下所示代码:

  不难看出,使用Dreamweaver创建的图像映射,其实质还是以代码的形式来创建的。在实际的使用过程中,为了提高工作效率和准确性,使用Dreamweaver比直接使用代码效率更高。网站建设公司本文关于“网站建设怎么创建图像映射”的知识就介绍分享到这里,谢谢关注,博纳网络编辑整理。
文章标题:网站建设怎么创建图像映射
本文地址:https://www.198bona.com/news/4167.html
如果您觉得案例还不错请帮忙分享:

网站建设

网络推广

解决方案

域名主机

建站行业资讯