html热区设置
title: 热区设置
tags: html
category: 前端开发
测量热区
用ps打开设置热区的图像，然后按如下步骤开启标尺
1、选择上方菜单栏的 “视图”，然后勾选标尺
2、之后回到图像编辑区域，会看到上方和左方出现了一个标尺
3、在标尺上右键，选择 像素 作为单位
4、之后就可以拉取尺子来测量图像 或 截取图像了
同时勾选上方菜单栏“窗口”的信息，在弹出的“信息”窗口可以设置“画板选项”，将“鼠标坐标”设置为 像素
圆形热区代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>图像热区</title>
</head>
<body>
<!-- 设置热区的图像 -->
<img src="./images/main.png" usemap="#main" />
<map name="main" id="main">
<!-- 设置热区为圆。coords 的参数分别为水平轴、垂直轴、半径 -->
<area
shape="circle"
coords="413,81,43"
href="./images/dreamweaver1.gif"
/>
<area
shape="circle"
coords="281,142,43"
href="./images/photo1.gif"
/>
<area
shape="circle"
coords="232,270,43"
href="./images/flash1.gif"
/>
<area
shape="circle"
coords="294,392,43"
href="./images/imageready1.gif"
/>
<area
shape="circle"
coords="413,434,43"
href="./images/fireworks1.gif"
/>
</map>
</body>
</html>
