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 这张图片。

HTML5 教程 HTML5 基本结构 HTML5 文本和语义 HTML5 布局 HTML5 列表 HTML5 组合 HTML5 表格 HTML5 链接和路径 HTML5 图片 HTML5 表单 HTML5 框架 HTML5 进度条 HTML5 多媒体