用CSS中的map标识制做单图多地区点一下的示例

日期:2021-03-05 类型:科技新闻 

关键词:如何织梦建站,如何创建网站,网站建立,公众号搭建,网站建站的

map标识

界定1个顾客端图象投射。图象投射(image-map)指带有可点一下地区的1幅图象。

    area元素始终嵌套循环在map元素內部。area元素可界定图象投射中的地区。
    img标识中的usemap特性可引入的map标识中的id或name特性(取决于访问器),因此大家应另外向map标识加上id和name特性。

示例

比如大家想在下面1张图完成9个网络热点地区,不切图,就应用map标识。

最先用 ps 获得几个座标:

随后编码完成:

CSS Code拷贝內容到剪贴板
  1. <!DOCTYPE html>   
  2. <html lang="en">   
  3. <head>   
  4.     <meta charset="UTF⑻">   
  5.     <title>Document</title>   
  6. </head>   
  7. <body>   
  8.     <img src="cat.jpg" alt="" usemap="#catmap" >   
  9.     <map name="catmap">   
  10.         <area shape="rect" coords="0,0,148,139" href ="http://www.baidu.com" target ="_blank" alt="">   
  11.         <area shape="rect" coords="148,139,295,0" href ="http://www.sina.com" target ="_blank" alt="">   
  12.         <area shape="rect" coords="295,0,439,140" href ="http://www.qq.com" target ="_blank" alt="">   
  13.         <area shape="rect" coords="148,139,0,340" href ="http://www.163.com" target ="_blank" alt="">   
  14.         <area shape="rect" coords="148,139,296,340" href ="http://www.soso.com" target ="_blank" alt="">   
  15.         <area shape="rect" coords="296,340,439,140" href ="http://sf.gg" target ="_blank" alt="">   
  16.         <area shape="rect" coords="0,340,148,493" href="http://www.zhihu.com" target ="_blank" alt="">   
  17.         <area shape="rect" coords="148,493,296,340" href="http://z.cn" target ="_blank" alt="">   
  18.         <area shape="rect" coords="296,340,436,490" href="http://jd.com" target ="_blank" alt="">   
  19.     </map>   
  20. </body>   
  21. </html>  

便是这样。
有关area

    area 能够是圆形(circ),多边形(poly),矩形框(rect),不一样样子要选择不一样的座标(coords).

    圆形:shape="circle",coords="x,y,z"
    x,y为圆心座标(x,y),z为圆的半径

    多边形:shape="polygon",coords="x1,y1,x2,y2,x3,y3,..."
    每对x,y座标都界定了多边形的1个端点(0,0) 是图象左上角的座标)。界定3角形最少必须3组座标;高纬多边形则必须更大部分量的端点。

    矩形框:shape="rectangle",coords="x1,y1,x2,y2"
    第1个座标是矩形框的1个角的端点座标,另外一对座标是对角的端点座标,"0,0" 是图象左上角的座标。请留意,界定矩形框具体上是界定带有4个端点的多边形的1种简化方式。(便是说,了解对角的两个点的座标就可以了。)

上一篇:举例详解CSS中的的优先选择级 返回下一篇:没有了