码迷,mamicode.com
首页 > Web开发 > 详细

HTML图片映射

时间:2018-11-06 15:42:25      阅读:158      评论:0      收藏:0      [点我收藏+]

标签:oct   顶点   .com   htm   矩形   inf   半径   get   属性   

<img>下图片映射

<map>与<area>

<img src="cat.jpg" alt="圣诞猫" usemap="#catmap">
  <map name="catmap">
      <area shape="" coords="" href="" target="_blank" >
      <area shape="" coords="" href="" target="_blank" >
  </map>  

<area>中坐标从左上角(0,0)点起,向右x轴,向下y轴,(中心点获取可用qq的截图功能,从左上角开始截图,长宽即为中心点坐标)

shape属性:“circle”、“rect”、“poly”,

<area shape="circle" coords="中心点,圆的半径(204,511,50)" href="" >

<area shape="rect" coords="矩形左上角点的坐标,右下角点的坐标(287,486,359,545)" href="" >

<area shape="poly" coords="分别列出多边形每个顶点的坐标" href="" >

技术分享图片

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>图片映射</title>
</head>
<body>
  <img src="cat.jpg" alt="圣诞猫" usemap="#catmap"> 
  <map name="catmap">
      <area shape="circle" coords="204,511,40" 
href="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1541497764763&di=f515456a13384605e140751e455323d9&imgtype=0&src=http%3A%2F%2Fpic21.photophoto.cn%2F20111125%2F0017030594470929_b.jpg"
target="_blank" > <area shape="rect" coords="287,486,359,545"
href="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1541497911660&di=59b640621e3342303cfbbef44685075a&imgtype=jpg&src=http%3A%2F%2Fimg4.imgtn.bdimg.com%2Fit%2Fu%3D3414111129%2C2073799617%26fm%3D214%26gp%3D0.jpg"
target="_blank" > </map> </body> </html>

  

 

HTML图片映射

标签:oct   顶点   .com   htm   矩形   inf   半径   get   属性   

原文地址:https://www.cnblogs.com/Amy-world/p/9915521.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!