图片热区详解 与切片的优势比较
|
切片和图片热区是什么？图片切片是将很大的网页图片，切成类似拼图的那种形式，之后运用 HTML 代码，再完美的拼接起来的一种加快网页图片显示的手法，图片切片之后你还可以在不同的切片上加入链接等等，从而达到点击不同图片区域跳转到不同页面的效果。图片热区是在一章图片上，绘制任意多边形或者圆形的区域，并加入链接的一种形式，图片热区的好处在于，图片不用被切割，就算被点击的区域是不规则的形状，图片热区也可以很轻松的应付，而切片要应付多边形的区域，可能就要求多次切片了，那么切片和图片热区到底有什么具体区别和优势呢，两者又怎样制作呢，我们今天就来看看图片热区和切片。 区别 图片热区和切片的区别在哪里？切片主要是应对网页中过大的图片，将过大的图片切成拼图状态的一小片，网页在打开过程中就可以同时下载多个图片从而满足加速图片显示的效果，但是切片完全使用代码拼合，会造成一定的错位，每一个切片都是可以包含一个链接的。热区主要应对一张图片中的不同区域要链接到不同地址的效果，热区只可以在一张图片上使用，但热区不限制形状，可以绘制很多的形状。  引用的内容：[www.veryhuo.com]
<img src="http://www.yiduqiang.com/shuiyin.png" width="176" height="83" usemap="#test" /> <img src="http://www.yiduqiang.com/shuiyin.png" width="176" height="83" usemap="#test" /> 要使用热区，首先在要使用热区的图片代码中加入 usemap 属性，并且进行一个名称的设定，名称前面必须加上 # 号。 Copy to Clipboard引用的内容：[www.veryhuo.com]
<map name="test" id="test"> </map> <map name="test" id="test"> </map> 用 map 标签绘制图片地图，name 和 ID 控制图片对应的地图，所以 name 和 ID 一定要和 usemap 的名称相同。 Copy to Clipboard引用的内容：[www.veryhuo.com]
<area shape="poly" coords="x1,y1,x2,y2,x3,y3" href="#" /> <area shape="circle" coords="x,y,r" href="#" /> <area shape="rect" coords="x1,y1,x1,y1" href="#" /> <area shape="poly" coords="x1,y1,x2,y2,x3,y3" href="#" /> <area shape="circle" coords="x,y,r" href="#" /> <area shape="rect" coords="x1,y1,x1,y1" href="#" /> 在 map 标签之内 使用 area 标签控制热区，shape 是热区类型，以上面代码为例，分别为多边形，圆形，长方形。coords 控制坐标，多边形和长方形都是一些样的，首先是点的 x 坐标，然后写 y 的坐标以此类推即可，圆形写法为 x坐标，Y坐标，半径。热区结合使用可以应对各种形状的图形。 在淘宝方面，使用热区是非常方便的，因为只用一张图片即可。 （编辑：核心网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
