HTML图片映射

时间  2019-11-17
标签 html 图片 映射 栏目 HTML 繁體版
原文   原文链接

<img>图片映射html

<map>与<area>一块儿使用来定义一个图像映射(一个可点击的连接区域).spa

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

<map>中name属性：3d

name属性 给map一个名字用来查询，这个属性是必须的，值必须不能为空而且不能带空格。name属性不许与同文档中其余map元素的值相同，若是id属性也被添加，name属性和id属性的值必须相同。htm


<area>元素必须拥有一个<map>元素祖先元素，但不必定是直接的父元素。只容许有开始标签不容许有结束标签。 blog

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

shape属性：“circle”、“rect”、“poly”，utf-8

<area shape="circle" coords="中心点，圆的半径（204，511，50）" href="" alt="">ci

<area shape="rect" coords="矩形左上角点的坐标，右下角点的坐标（287,486,359,545）" href="" alt="">文档

<area shape="poly" coords="分别列出多边形每一个顶点的坐标（x1,y1,x2,y2,x3,y3）" href="" alt="">get

<!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" alt="">
      <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" alt="">
  </map> 
</body>
</html>
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程