密码:
网络营销 it新闻 军事新闻 社会新闻 it技术 网站优化 游戏资讯 公司资讯
html为图片添加锚点
发布日期:2018-05-14 阅读数:34 来源:互联网 由金功呈网站建设公司整理 【关闭】



热点链接可以帮你解决。这种效果的实质是把一幅图片划分为不同的热点区域,再让不同的区域进行超链接。要完成地图区域超链接要用到三种标签:<img><map><area>。


     <img src="图形文件名" usemap="#图上锚点区域的名称">

     <map name="图上锚点区域的名称">

     <area shape=形状 coords=区域座标列表 href="URL资源地址">
      <!--可根据需要定义多少个热点区域-->
      <area shape=形状 coords=区域座标列表 href="URL资源地址">

     </map>

【1】shape -- 定义热点形状
          shape=rect: 矩形
          shape=circle:圆形 
          shape=poly: 多边形 

【2】coords -- 定义区域点的坐标

     a.矩形:必须使用四个数字,前两个数字为左上角座标,后两个数字为右下角座标
         例:<area shape=rect coords=100,50,200,75 href="URL">

     b.圆形:必须使用三个数字,前两个数字为圆心的座标,最后一个数字为半径长度
         例:<area shape=circle coords=85,155,30 href="URL"> 

     c.任意图形(多边形):将图形之每一转折点座标依序填入
         例:<area shape=poly coords=232,70,285,70,300,90,250,90,200,78 href="URL">

注意:如果图片在div或者其他容器中,左上角和右下角是相对于父元素的位置的坐标。

demo : 
   <img src="../menu.gif" width="204" height="510" border="0" usemap="#Map" />
<map name="Map" id="Map">
    <area shape="rect" coords="12,37,181,88" href="http://www.qq.com" onFocus="this.blur()"/>
    <area shape="rect" coords="12,97,182,143" href="http://www.yahoo.com" />
    <area shape="rect" coords="18,155,179,200" href="http://www.sina.com" />
    <area shape="rect" coords="18,211,182,260" href="http://www.baidu.com" />
    <!--<area shape="rect" coords="12,444,182,490" href="sm-textfile.html" target="pcs"/> -->
    <!-- onFocus="this.blur()" 去掉虚线框 -->
</map>

广州金功呈网站建设网微信二维码
  • 深圳市一键一家网络科技有限公司官方网址:http://www.songhu9.com.cn
  • QQ:316675593,电话号码:13660626274
  • 业务范围:公司网站建设、管理软件研发、软件网站二次开发、400电话、电商平台研发、公众号研发!
  • 免责申明:本站内容均来源于网络,版权归原创所有,如有任何版权方面的问题,请与我们联系处理!