资讯专栏INFORMATION COLUMN

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

youkede / 3393人阅读

摘要:一段感悟在说图像映射之前先说一段最近动态。正题图像映射指的是分割一块图像使得分割的每一部分都能多带带有一个链接地址。而且浏览器会忽略超过图片界限的坐标。

一段感悟

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


正题

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




图像映射



电脑手机

手机
电脑



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


结束

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

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/51565.html

相关文章

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

    摘要:一段感悟在说图像映射之前先说一段最近动态。正题图像映射指的是分割一块图像使得分割的每一部分都能单独有一个链接地址。而且浏览器会忽略超过图片界限的坐标。 一段感悟 在说图像映射之前先说一段最近动态。最近稍稍的深入学了一段时间的htnl与css,应该算是在打基础,其实在打基础之前我已经学习了一段时间js,jquery,backbone,angularJs,当时也知道要打好基础在去学习其他内...

    beita 评论0 收藏0
  • 我的Java开发之路

    摘要:提高有了入门的基础,开始自学当时流行的三大框架和。业余的时间,经常在上闲逛,看一些博客或开源的代码。 最近有一位小伙伴通过公众号给我留言, 我参加工作没多久,看着圈里的技术大牛,特别羡慕,也渴望成为技术大牛,想让您分享一下从小白到大牛是怎样练成的,我该如何提高自己 首先,谢谢这位小伙伴的一直关注。其次,我并不是大牛,只是早搬了几年的砖而已,不过可以分享一下我的Java开发之路。 入门 ...

    lidashuang 评论0 收藏0
  • 程序员写简历时的技术词汇拼写规范备忘录!

    摘要:写在前面每年这个时候又到了求职的旺季。求职前,我们都会花很多的时间在自己的技术水平提升笔面试的准备之上,但往往却忽略了找工作第一步所需要的一个严谨且靠谱的简历。而程序员写简历,第一步就是需要注意严谨而规范地使用各种技术词汇。 ...

    h9911 评论0 收藏0
  • 前端开发-从入门到Offer - 收藏集 - 掘金

    摘要:一些知识点有哪些方法方法前端从入门菜鸟到实践老司机所需要的资料与指南合集前端掘金前端从入门菜鸟到实践老司机所需要的资料与指南合集归属于笔者的前端入门与最佳实践。 工欲善其事必先利其器-前端实习简历篇 - 掘金 有幸认识很多在大厂工作的学长,在春招正式开始前为我提供很多内部推荐的机会,非常感谢他们对我的帮助。现在就要去北京了,对第一份正式的实习工作也充满期待,也希望把自己遇到的一些问题和...

    sf_wangchong 评论0 收藏0

发表评论

0条评论

youkede

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<