基于图片的链接

来自CloudWiki
跳转至： 导航， 搜索

基于图片的链接

  • 除了刚才这种文字链接，图片里面也可以放置链接
  • W4-11.jpg
<a href="http://www.sict.edu.cn"><img src="sict5.png" alt="山东商职"></a>

 <html>
    <head>

    </head>
    <body>
      <a href="http://www.sict.edu.cn"><img src="sict5.png" alt="山东商职"></a>
    </body>
 </html>

问题：我们发现为页面中的图像加入超链接后，默认情况下都带有一道黑框，有什么方法可以去掉它呢 ？

图片映射功能的实现

  • 我们经常会给一张图片绑定一个超链接，以供用户欣赏大图或者跳转页面。HTML有个图像映射的功能，可以在一张图片的不同区域绑定链接，让用户可以有更新奇的体验。
  • W4-23.png

开启图像映射

  • 给<img>标签设置usemap属性从而开启一张图片的映射功能。
<img src = "image1.jpg" alt = "图片1" usemap = "#umap" />
  • 这里的usemap的属性值为<map>标签的id值，下文会提到。

设置映射区域

  • 图片开启了映射后，应该给图片定义若干个映射区域。我们用<map>标签来包裹这些映射区域。<map>标签的id值必须和图片的usemap属性值对应。
<map name = "umap" id = "umap">
  <area shape = "rect" coords = "20,20,100,100" href = "image2.jpg" alt = "图片2" />
  <area shape = "circle" coords = "200,200,10" href = "image3.jpg" alt = "图片3" />
  <area shape = "poly" coords = "0,0,110,260" href = "index.html" alt = "主页" />
</map>
  • <area>标签必须嵌套在<map>内部，用来定义映射区域。
  • shape属性定义映射区域的形状
   rect为矩形

   circle为圆形

   poly为多边形
  • coords定义了形状的坐标与半径
 <map name = "umap" id = "umap">
    <area shape = "rect" coords = "x1,y1,x2,y2" />
    //x1,y1,x2,y2为矩形的左上角和右下角坐标。
    <area shape = "circle" coords = "x1,y1,r" />
    //x1,y1,r为圆心的坐标和半径。
    <area shape = "poly" coords = "x1,y1,x2,y2,.....,xn,yn" />
    //x1,y1,x2,y2,..,xn,yn为多边形的n个坐标点，最后一个点的坐标应该与第一个相同，若不同浏览器会自动补全。
 </map>
 坐标和半径都是相对于像素而言，左上角为像素的 0,0 点，你可以用图片编辑工具来确定任一点的像素坐标。
  • href映射到图片或者页面
href = "index.html"
href = "image.jpg"
  • 另外<area>标签也可以设置target属性，用来设置在新窗口或者本窗口打开新页面。
target = "_blank"
target = "_self"
  • 一个例子：
  • W4-23.png
  • 将下面的代码贴到W3C编辑器上实验
 <html>
    <head>

    </head>
    <body>
        <img src = "http://upload-images.jianshu.io/upload_images/5099997-d59bd279ff414757.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" usemap = "#umap" alt = "猫和狗" />
        <map id = "umap" name = "umap">
            <area shape = "rect" coords = "220,180,420,400" href = "http://www.jd.com" alt = "狗" target = "_blank" />
            <area shape = "circle" coords = "685,340,130" href = "http://www.tmall.com" alt = "猫" target = "_blank" />
        </map>
    </body>
 </html>



参考文档： [1]HTML图像映射 http://www.jianshu.com/p/85c2f6e48724

取自“http://www.openbrains.net/mediawiki/index.php?title=基于图片的链接&oldid=10972”