当前位置:软件学堂 > 资讯首页 > 网络编程 > DIV+CSS > html图像热区链接

html图像热区链接

2012/11/19 12:16:56作者:佚名来源:网络

移动端

【实例介绍】

html图像热区链接

          同一个图像的不同部分可以链接到不同的文档,这就是热区链接。要使图像特定部分成为超链接,就要在图像中设置“热区”,然后再创建链接,这样当鼠标移动到图像热区的时候会变成手的形状,当按下鼠标的时候,页面就跳转到或者打开设定的uRL。
         <map>定义一个客户端图像映射,图像映射(image.map)指带有可点击区域的一幅图像。<area>标签定义图像映射中的区域。<img>标签中的usemap属性与map元素的n锄e属性相关联,创建图像与映射之间的联系。

【基本语法】

【语法介绍】

【实例代码】

<img src="images/9956.jpg" alt="Planets" width="500" height="320" border="0" usemap="#planetmap" /> <map name="planetmap" id="planetmap2">   <area shape="circle" coords="180,139,14" href ="venus.html" alt="Venus" />   <area shape="circle" coords="129,161,10" href ="mercur.html" alt="Mercury" />   <area shape="rect" coords="456,82,475,139" href ="sun.html" alt="Sun" /><area shape="rect" coords="452,143,471,187" href="#"> <area shape="rect" coords="446,193,471,243" href="#"><area shape="rect" coords="442,254,466,298" href="#"></map> <map name="planetmap" id="planetmap">   <area shape="circle" coords="180,139,14" href ="venus.html" alt="Venus" />   <area shape="circle" coords="129,161,10" href ="mercur.html" alt="Mercury" />   <area shape="rect" coords="457,130,476,187" href ="sun.html" alt="Sun" /> </map>

【代码分析】

area元素永远嵌套在map元素内部,area元素可定义图像映射中的区域。<img>中的 usemap属性可引用<map>中的id或name属性,所以我们应同时向<map>添加id和name属性,如图所示。

图像热区链接运行效果

 【素材及源码下载】

请点击:html图像热区链接 下载本实例相关素材及源码

 

标签: 链接