HTML5 map 图片映射

map 图片映射

获取图片的坐标位置。

<!-- usemap 指定关联映射区域 -->
<img src="/public/home/img/flower.png" usemap="#map" />

<!-- 映射区域 -->
<map name="map" />
 <!-- 每个 area 为一个映射单元,映射的单元可以有多个 -->
 <!-- coords 指定图片的映射位置 href 映射的地址 -->
 <area shape="rect" coords="35,35,60,60" href="/public/home/img/fly.jpg" target="_blank">
</map>

点击小花的中心的黄色区域,会映射到 fly.jpg 这张图片。

更多教程 HTML5 教程 CSS3 教程 JavaScript 教程 JQuery 教程 React.js 教程 Node.js 教程 Koa2 教程 Python 教程 Linux 教程