HTML5 图片

图片

加载图片

<!-- <img src="图片路径" width="宽度" height="高度" /> | 默认显示原图大小 -->

<img src="/public/home/img/fly.jpg" />

效果

ismap

捕获用户点击图片的坐标位置。

<a href="/less/6">
 <img src="/public/home/img/flower.png" ismap /> 
</a>

尝试点击图片，观察当前的URL的后缀，会增加类似?26,48的参数，这就是你所点击的图片坐标。

map

图片坐标映射。

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

<!-- 映射区域 -->
<map name="flower" />

 <!-- area 映射单元，可以定义多个 -->
 <!-- coords 映射坐标 -->
 <!-- href 映射资源 -->

 <area shape="rect" coords="35,35,60,60" href="/public/home/img/fly.jpg" target="_blank">

</map>

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