图像映射——我的web前端自学之路进行时2

一段感悟

在说图像映射之前先说一段最近动态。最近稍稍的深入学了一段时间的htnl与css,应该算是在打基础,其实在打基础之前我已经学习了一段时间js,jquery,backbone,angularJs,当时也知道要打好基础在去学习其他内容,但是却并没有真的认真去执行。直到后来学习的时候感觉自己太浮躁了,有点急于求成的感觉,那个时候终于静下心来决定慢慢来,一步一步的走了。还是那几个字:不急不躁,不快不慢。低头做事,抬头做人。空杯心态,继续加油。好了,进入正题。

正题

图像映射指的是分割一块图像使得分割的每一部分都能单独有一个链接地址。
例子如下:

<!DOCTYPE html>
<html lang=”en”>
<head>

<meta charset="UTF-8">
<title>图像映射</title>

</head>
<body>
<img src=”../素材/imgs/电脑手机.jpg” alt=”电脑手机” usemap=”#photo”>
<map name=”photo”>

<area shape="rect" coords="0,400,200,800" alt="手机" href="http://www.phone.com">
<area shape="circle" coords="400,400,200" alt="电脑" href="http://www.computer.com">

</map>
</body>
</html>

代码解释:先用img引入一张图片,然后使用map标签,map中设置的name属性值就是img中的usemap属性值。然后开始分割图片,使用area分割,area中有几个属性,一个是shap(指定分割的形状),一个是coords(指定坐标,这个坐标指的是以图片右上角为原点的直角坐标轴上的坐标,不同的react会有不同的coords值,比如上述代码中的是rect和circle,(还有default,poly,读者自己发掘)即矩形和圆形,其坐标分别为矩形左上角的下x,y坐标,右下角的下x,y坐标。圆形的圆心坐标,半径大小);另外一个属性值就是href,即相应分割快对应的链接,这里需要注意的是如果area中的区域发生了重叠,会优先使用最先规定的坐标。而且浏览器会忽略超过图片界限的坐标。

结束

有写错的地方希望各位多多指正,也请文明指正,转载请说明出处。谢谢各位能抽时间看完。

    原文作者:习惯着也就淡了
    原文地址: https://segmentfault.com/a/1190000012145746
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞