网页不规则图形热点链接(img map area)、coords

热点链接(img map area)
           
           

怎么在一个图片中做多个链接呢?

           

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

           

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>

           
阅读更多
文章标签: 图形 url border
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭