博客列表 >HTML 图片定位

HTML 图片定位

计算机的博客
计算机的博客原创
2017年07月29日 10:53:341856浏览

coords 属性与 shape 属性配合使用,来规定区域的尺寸、形状和位置.

用图像热点设置。

有效利用<img>标签的usemap属性,给图片划分一个地图,设定图片热点(即给图片分区,但不是切割,图片还是完整的,只是用代码将图片分成几个部分),然后给热点设定相应的链接。

usemap属性的用法——使用时:<img src="test.gif" usemap="#Map">这里的#后面的Map为我们自定义的图像地图的名称,可以任意设定。

针对你的问题,具体代码如下:
<div>
   <img usemap="#Map" src="quarters.gif" style="width:200px;height:200px;" alt=""  ismap="ismap" />
   <map name="Map">
       <area shape="rect" coords="0,0,100,100" href ="topleft.html" alt="topleft.html" />
       <area shape="rect" coords="100,0,200,100" href ="topright.html;" alt="topright.html;" />
       <area shape="rect" coords="0,100,100,200" href ="bottom-left.html" alt="bottom-left.html" />
       <area shape="rect" coords="100,100,200,200" href ="bottomright.html" alt="bottomright.html" />
   </map>
</div>

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议