6.嵌入图片和分区响应图

插入图片 并给图片加上超链接

加入target 是点击图片打开一个新页面。不是原页面跳转。

<a href="http://www.santaihu.com/" target="_blank">
    <input type="image" src="akaaa.png" width="100px"  alt="百度网站">
</a>

 ----------------

图片分区相应代码

矩形:

坐标顺序为左上右下 usemap里面的声明前加#,rect是矩形属性

<img src="timg (1).jpg" usemap="#b001">
<map name="b001">
    <area shape="rect" coords="50,106,220,273" href="https://www.bilibili.com/">
    <area shape="rect" coords="260,106,430,275" href="https://www.baidu.com/">
    <area shape="rect" coords="470,106,640,275" href="https://www.hao123.com/">
    <area shape="rect" coords="680,106,850,275" href="caca.html">
</map>

 圆形:

 坐标顺序为X,Y,半径 。 circ 或 circle都是圆属性的意思。下面还有其他俩种写法都可以

<img src="timg (2).jpg" width="200px" usemap="#m002">
<map name="m002">
    <area shape="circ" coords="100,100,100" href="https://www.hao123.com/">
  • 圆形(circ 或 circle)
  • 多边形(poly 或 polygon)
  • 矩形(rect 或 rectangle)

多边形和矩形差不多

posted @ 2018-07-24 16:16  我爱无糖汽水  阅读(311)  评论(0编辑  收藏  举报