Rumah >hujung hadapan web >html tutorial >html中<img>标签之关于创建图像映射详解

html中<img>标签之关于创建图像映射详解

黄舟
黄舟asal
2017-08-11 13:33:012438semak imbas

初级前端一枚  下面代码是在图片上创建图像映射  自己整理了下 做个笔记 希望也可以帮助后来学习的朋友!

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
  <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
  <area shape="poly" coords="23,58,8,59,40,70" alt="Venus" href="venus.htm">
</map>

该段代码中的shape指的是点击区域的形状,coords指的应该是链接区域在图片中的坐标(像素为单位)。

shape
1、rect    矩形      
2、circle   圆形      
3、poly    多边形

coords
1、距形:左上角顶点坐标为(x1,y1),右下角顶点坐标为(x2,y2)
2、圆形:(圆心坐标为(X1,y1),半径为r)
3、多边形:(各顶点坐标依次为(x1,y1)、(x2,y2)、(x3,y3) ......)

Atas ialah kandungan terperinci html中<img>标签之关于创建图像映射详解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn