H5 图片热点区域

应用场景

  1. 不规则按钮的响应
  2. 一张图片设置多个响应域

使用方法

利用usemap属性,构建一个map标签



<html>
<head>
<meta charset="utf-8">
<title>热点区域title>
head>
<body>

<img src="xxx.png" usemap="#map"
 name="map">
  
  <area shape="circle" coords="20,20,20" title="1111111" href="xxxx" onFocus="this.blur()">
  
  <area shape="rect" coords="100,100,200,200" title="222222222" href="xxxx">
  
  <area shape="poly" coords="0,0,200,0,200,200,100,300,0,200" href="xxxx" title="3333333333">
map>
body>
html>

shape属性

  • shape=rect: 矩形
  • shape=circle:圆形
  • shape=poly: 不规则图形

coords属性

  • 矩形:必须使用四个数字,前两个数字为左上角座标,后两个数字为右下角座标
  • 圆形:必须使用三个数字,前两个数字为圆心的座标,最后一个数字为半径长度
  • 任意图形(多边形):将图形之每一转折点座标依序填入
    H5 图片热点区域_第1张图片

你可能感兴趣的:(html)